ouput标签详解

属性

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