使用javascript在div上实时输入和显示滑块

他，伙计们 我一直在尝试创建4个范围滑块，其值显示在右侧，并实时显示其总和

我所能做的-

我创建了4范围滑块

我在滑行时显示了它们的价值

我有一些代码来求和 我不能做的事

我不能实时显示总数 请参见下面的快照：

这是我的密码：

<div id="slider">
<form oninput="amount.value=rangeInput.value; 
               amount2.value=rangeInput2.value;
               amount3.value=rangeInput3.value;
               amount4.value=rangeInput4.value;  
            " >

    <input name="one"     class="bar" type="range" id="rangeInput" value="0" onchange="rangevalue.value=value"/>
    <input name="two" class="bar" type="range" id="rangeInput2" value="0" onchange="rangevalue2.value=value"/>
    <input name="three" class="bar" type="range" id="rangeInput3" value="0" onchange="rangevalue3.value=value"/>
    <input name="four" class="bar" type="range" id="rangeInput4" value="0" onchange="rangevalue4.value=value"/>
    <span  class="highlight"></span>

     <output name="amount" for="rangeInput">0</output>
     <output name="amount2" for="rangeInput2">0</output>
     <output name="amount3" for="rangeInput3">0</output>
     <output name="amount4" for="rangeInput4">0</output>

    <br/>

Total:  <div id="total"></div>

     </form>
</div>


     <script type="text/javascript" language="javascript">
        $(document).ready(function(){
            $("#total").click(function(){
                var sum=$("#rangevalue").val()+$("#rangevalue2").val()+$("#rangevalue3").val()+$("#rangevalue4").val();
            });
        });
    </script>

0
0
0
0


总数：
$（文档）.ready（函数（）{
$（“#总计”）。单击（函数（）{
var sum=$（“#rangevalue”）.val（）+$（“#rangevalue2”）.val（）+$（“#rangevalue3”）.val（）+$（“#rangevalue4”）.val（）；
});
});

有关于如何实时显示总和数据的帮助吗？所以当我移动滑块时，总和会改变

---

谢谢。

您已经在使用jQuery，所以请删除内联事件处理程序，改用jQuery

HTML中似乎没有任何

rangevalue

元素，它们被称为

rangeInput

范围滑块上连续更新的事件是

oninput

事件

然后就是解析数字和相加的问题

$(document).ready(function () {
    $('.bar').on('input', function () {
        var val1 = parseInt($("#rangeInput").val(), 10);
        var val2 = parseInt($("#rangeInput2").val(), 10);
        var val3 = parseInt($("#rangeInput3").val(), 10);
        var val4 = parseInt($("#rangeInput4").val(), 10);

        var sum =  val1 + val2 + val3 + val4;
        $('#total').text(sum)
    });
});

---

单击

将在您单击目标时发生；我想你应该使用

change

：

$（'input.bar[type=range]'）。在（'input'，function（）{}）

上。工作起来很有魅力。我太愚蠢了，我忘了包括Jquery库。