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