HTML怎么自动计算出上两行的值在第三行里面？

Question

怎么用原生js实现将上两行的数据经过计算自动填充到第三行？谢谢！

Answer 1

如果使用原生js的话，需要做的工作就稍微有点多了。一步一步来吧。

第一点；首先要明确需要绑定什么事件。实时监听的话，给input绑定change事件是不行的。绑定的change事件如果我没记错的话需要在input失去焦点生效。因此这个时候，我们需要绑定一个叫做input的事件来完成实时监听，但是，在IE9以下，input事件不支持，而支持的是另外一个叫做propertychange的事件。

第二点：事件绑定在大多数浏览器是支持的addEventListener，但低版本IE仅支持的是attachEvent，因此需要一个事件绑定的兼容处理。

function addEvent(elem, eventtype, handler) {
    elem.addEventListener ? addEventListener(eventtype, handler, false) : elem.attachEvent('on' + eventtype, handler);
}

第三点：又因为获取元素的方式querySelector与getElementByClassName都有兼容性问题，因此选择getElementById来获取元素。

完整代码如下！

var input_1 = document.getElementById('input_1');
var input_2 = document.getElementById('input_2');
var result = document.getElementById('result');

function changeHandler() {
    var value_1 = parseInt(input_1.value || 0);
    var value_2 = parseInt(input_2.value || 0);

    result.value = value_1 + value_2;
}

function addEvent(elem, eventtype, handler) {
    elem.addEventListener ? addEventListener(eventtype, handler, false) : elem.attachEvent('on' + eventtype, handler);
}

// input IE9一下不支持，因此需要额外绑定一个
['input', 'propertychange'].forEach(function(event) {
    addEvent(input_1, event, changeHandler);
    addEvent(input_2, event, changeHandler);
})

Answer 2

1. 如果是angular或者react这类比较新的前端框架都支持双向绑定；

2. 如果是jquery或者原生js的话，那只能操作dom节点绑定事件了；

样例我没有，给你一个思路吧：
假设面积的dom是a，售价的dom是b，尺价为c,分别为a和b创建keyup事件

document.getElementById('a').on('keyup',function(){
    // 1. 判断a和b是否都有值，如果存在一个或一个以上没有值，尺价就不显示
    // 2. 判断面积有值是否为0，如果为0，校验报错
    // 3. 如果值都有且没问题，那么除法计算结果，并为`c`赋值
});
// b也是一样的，这样的做法是为了让结果可以即时显示
document.getElementById('b').on('keyup',function(){
    // 1. 判断a和b是否都有值，如果存在一个或一个以上没有值，尺价就不显示
    // 2. 判断面积有值是否为0，如果为0，校验报错
    // 3. 如果值都有且没问题，那么除法计算结果，并为`c`赋值
});

Answer 3

框架的话，ng或者vue,只需要给上面两个绑定一个值，第三个等于前两个的和就可以了！

如果是原生js或者jquery，在第一个，第二个文本框那里绑定blur或者change事件！事件触发的时候，计算前两个文本框的值，赋值到第三个！

Answer 4

总体思路就是获取元素，提取元素中的内容并计算即可，大致代码如下，原生js：

var area = document.getElementById('area'); //获取“面积”
var price = document.getElementById('price'); //获取“售价”
var cal = document.getElementById('cal'); //获取“尺价”文本框
var inputs =document.getElementsByTagName('input');
for(var i = 0;i<inputs.length;i++){

//输入框离开焦点自动计算第三文本框的值
inputs[i].onblur =function(){
    cal.value =price.value/area.value;
};

}

Answer 5

监听一二行的keydown事件 函数中去取值计算 渲染到第三行