从范围滑块</outputs>更新两个<outputs>

时间:2015-04-19 23:45:30

标签: javascript html

感谢帮助更新范围滑块和隐藏字段值中的两个不同值。

这样可以完美地更新费用输出并显示任何滑块值更改前的总输出,但当滑块是用户时,第二个输出显示ie。 “undefined300”,其中300是滑块值。它基本上没有添加隐藏字段值。当然,我做的事情很愚蠢。

<input type="range" min="0" max="100" value="50" id="fee" step="1" oninput="outputUpdate(value)">
<input type="hidden" id="subTotal" value="1000" />

$<output for="fee" id="fee"> </output>

$<output for="fee subTotal" id="total"> </output>

<script>
    function outputUpdate(fee, subTotal) {
        document.querySelector('#fee').value = fee;
        document.querySelector('#subTotal').value = subTotal;
        var total = +subTotal + +fee
        document.querySelector('#total').value = total;
    }
</script>

1 个答案:

答案 0 :(得分:1)

您正在调用outputUpdate(value),但您的函数需要两个参数outputUpdate(fee, subTotal){ ... },因此subTotal将是“未定义”。还有其他问题。

试试这个更新的脚本:

<script>
function outputUpdate(fee) {
    document.querySelector('#fee').value = fee;
    var subTotal = document.querySelector('#subTotal').value;
    var total = parseInt(subTotal) + parseInt(fee);
    document.querySelector('#total').value = total;
}
</script>

演示:http://jsbin.com/pudequ/1/