Question

<!DOCTYPE html>
<html>
<head>
    <script type = "text/javascript">
        $(init);

        function init(){
            $('input[type="range"]').change(getTotal());        
        }

        function getTotal(){
            var total = document.getElementById("outTotal");
            total.innerHTML = Number(slide.value) + Number(slide1.value0);
        }        

    </script>
</head>
<body>
    <input id="slide" type="range" min="1" max="100" step="1" value="10" >
    <input id="slide1" type="range" min=1 max=100 step=1 value=10 >    

    <div>
        <label>Total</label>
        <output id = "outTotal"></output>
    </div>
</body>
</html>

这是我现在所拥有的。我试图将两个范围滑块合计并在更改时显示。我知道在HTML中我可以添加onchange = "getTotal()"，但有没有办法让init()函数一直运行。我无法弄清楚该函数中的代码有什么问题。

Answer 1

我已经为您修好了。将其与您的代码进行比较并发现差异......

$(function(){
    $('input[type=range]').change(getTotal); // not () - you're not calling the function
    getTotal(); // initialy call it
});

function getTotal(){
    var total = document.getElementById("outTotal");
    var slide = document.getElementById("slide");
    var slide1 = document.getElementById("slide1");
    total.innerHTML = 1*(slide.value) + 1*(slide1.value); // here you used the slide slide1 without initializing them at all
}

现场演示http://jsfiddle.net/ox8gxk1h/

Answer 2

你走了：

$('input[type="range"]').on("change", function() {
    var total = 0;
    $('input[type="range"]').each(function() {
        number = parseInt(this.value);
        total += number;       
    });
    $("#outTotal").html(total);
});

小提琴：http://jsfiddle.net/oqpsf11f/

HTML / Javascript范围滑块

2 个答案: