HTML / Javascript范围滑块

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 个解决方案

解决方案1
0 已采纳 2014-10-25 15:53:45

解决方案2
0 2014-10-25 16:04:31

HTML / Javascript范围滑块

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-10-25 15:53:45

解决方案2 0 2014-10-25 16:04:31

解决方案1
0 已采纳 2014-10-25 15:53:45

解决方案2
0 2014-10-25 16:04:31