ouput标签详解

属性

<output name="o1" for="a b"></output>

output标签用于显示计算结果,而被计算得数从哪来?从for属性的指向来,注意从for属性获取的元素valuestring类型,计算时需要转换为numberparseInt或者+都可以。

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值