Fatal编程技术网

HTML/Javascript范围滑块

javascript html

HTML/Javascript范围滑块,javascript,html,range,Javascript,Html,Range,这是我现在拥有的。我试图合计两个范围滑块，并在它们更改时显示。我知道在HTML中我可以添加onchange=getTotal，但是有没有办法让init函数一直运行。我无法找出该函数中的代码有什么问题。这里我为您修复了它。将其与您的代码进行比较，找出差异 <!DOCTYPE html> <html> <head> <script type = "text/javascript"> $(init); funct

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

这里我为您修复了它。将其与您的代码进行比较，找出差异

<!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>
现场演示

给您：

$(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
}
fiddle:

我认为有一个输入错误，应该是$'input[type=range]，您错过了双引号。PS不是我的否决票，但我只是向上投票，只是为了澄清：@LarryLee它们是可选的，除非值中有空格或特殊符号。在这里，它可以正常工作。感谢您的快速回复，但它仍然没有显示总数。html部分还有什么需要包含的吗？@user3562657看看我包含的JSFIDLE，它在那里工作。 
$('input[type="range"]').on("change", function() {
    var total = 0;
    $('input[type="range"]').each(function() {
        number = parseInt(this.value);
        total += number;       
    });
    $("#outTotal").html(total);
});