属性
<output name="o1" for="a b"></output>
output
标签用于显示计算结果,而被计算得数从哪来?从for
属性的指向来,注意从for
属性获取的元素value
为string
类型,计算时需要转换为number
,parseInt
或者+
都可以。
HTML写法
<form id="form" oninput="o1.value = (+a1.value) + (+b1.value); o2.value = (+a2.value) * (+b2.value)">
<p>sum</p>
<input type="number" value="0" name="a1" step="1"> +
<input type="number" value="0" name="b1" step="1"> =
<output name="o1" id="output1" for="a1 b1"></output>
<p>minus</p>
<input type="number" value="0" name="a2" step="1"> -
<input type="number" value="0" name="b2" step="1"> =
<output name="o2" id="output2" for="a2 b2"></output>
</form>
上面的name
属性都可以用id属性替换。
JS写法
<script type="text/javascript">
form = document.getElementById('form');
var input1 = form.elements['a1'];
var input2 = form.elements['b1'];
var ouput1 = form.elements['o1'];
var input3 = form.elements['a2'];
var input4 = form.elements['b2'];
var ouput2 = form.elements['o2'];
form.addEventListener('input',function () {
ouput1.value = (+input1.value) + (+input2.value);
ouput2.value = (+input3.value) - (+input4.value);
});
</script>