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);

})