猿问

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

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

临摹微笑
浏览 436回答 1
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);})
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答