JavaScript：更新两个范围值之和的值

我最近开始研究Django和JavaScript，目前正在研究范围项目。我成功地拥有了两个功能秤，并在用户每次修改它们时更新它们旁边的值

<p>You are spending<span id="demo1"></span> dollars on this item.</p>
<div class="input-group">
    <p class="input-group-text">0<input type="range" id="myRange1" name="myRange" min="0" max = "120" step="5" class="form-range"></p>
    <p class="input-group-text"> 120</p>
</div>

var slider1 = document.getElementById("myRange1");
var output1 = document.getElementById("demo1");
output1.innerHTML = slider1.value; 
slider1.oninput = function() {
  output1.innerHTML = this.value;
}

<p>You are spending<span id="demo2"></span> dollars on this item.</p>
    <div class="input-group">
        <p class="input-group-text">0<input type="range" id="myRange2" name="myRange" min="0" max = "120" step="5" class="form-range"></p>
        <p class="input-group-text"> 120</p>
    </div>

    var slider2 = document.getElementById("myRange2");
    var output2 = document.getElementById("demo2");
    output2.innerHTML = slider2.value; 
    slider2.oninput = function() {
      output2.innerHTML = this.value;
    }

您在这件商品上花费了美元

0
120
var slider1=document.getElementById（“myRange1”）；
var output1=document.getElementById（“demo1”）；
output1.innerHTML=slider1.value；
slider1.oninput=函数（）{
output1.innerHTML=this.value；
}
你在这个项目上花费了美元

0
120
var slider2=document.getElementById（“myRange2”）；
var output2=document.getElementById（“demo2”）；
output2.innerHTML=slider2.value；
slider2.oninput=函数（）{
output2.innerHTML=this.value；
}

现在，我想要得到的是一个值，它是两个值的总和，当用户修改两个刻度中的一个时，它就会更新。我尝试了以下方法：

<p>You have spent <span id="demo_total"></span> dollars in total.</p>

var value_total = 0
var output_total = document.getElementById("demo_total");
output_total.innerHTML = 120 // Display the default slider value
value_total.value = function() {
  output_total.innerHTML = parseInt(output1.innerHTML) + parseInt(output2.innerHTML);
}

您总共花了美元

var值_总计=0
var output_total=document.getElementById（“demo_total”）；
output_total.innerHTML=120//显示默认滑块值
value_total.value=函数（）{
output_total.innerHTML=parseInt（output1.innerHTML）+parseInt（output2.innerHTML）；
}

---

但是没有成功。你能帮我做到这一点吗？提前感谢您。

检查代码我发现您没有正确添加侦听器，您需要首先修复它。在让侦听器正确处理每个滑块输入事件之后，您可以计算总数，并将其分配给innerHTML，就像您现在所做的那样

---

对于监听器，请检查以下内容：

以下代码正按照您的要求工作

<p>You are spending<span id="demo1"></span> dollars on this item.</p>
<div class="input-group">
    <p class="input-group-text">0<input type="range" id="myRange1" name="myRange" min="0" max = "120" step="5" class="form-range"></p>
    <p class="input-group-text"> 120</p>
</div>

<p>You are spending<span id="demo2"></span> dollars on this item.</p>
    <div class="input-group">
        <p class="input-group-text">0<input type="range" id="myRange2" name="myRange" min="0" max = "120" step="5" class="form-range"></p>
        <p class="input-group-text"> 120</p>
    </div>

    <p>You have spent <span id="demo_total"></span> dollars in total.</p>
<script type="text/javascript">
    var slider1 = document.getElementById("myRange1");
    var output1 = document.getElementById("demo1");
    var output_total = document.getElementById("demo_total");
    var slider2 = document.getElementById("myRange2");
    var output2 = document.getElementById("demo2");

    var value_total = 0
    output1.innerHTML = slider1.value; 
    slider1.oninput = function() {
      output1.innerHTML = this.value;
      output_total.innerHTML = +this.value + +output2.innerHTML //on update of slider 1
    }
    output2.innerHTML = slider2.value; 
    output_total.innerHTML = 120;
    slider2.oninput = function() {
      output2.innerHTML = this.value;
      output_total.innerHTML = +this.value + +output1.innerHTML //on update of slider 2
    }
</script>

您在这件商品上花费了美元

0
120
你在这个项目上花费了美元

0
120
你总共花了美元

var slider1=document.getElementById（“myRange1”）；
var output1=document.getElementById（“demo1”）；
var output_total=document.getElementById（“demo_total”）；
var slider2=document.getElementById（“myRange2”）；
var output2=document.getElementById（“demo2”）；
var值_总计=0
output1.innerHTML=slider1.value；
slider1.oninput=函数（）{
output1.innerHTML=this.value；
更新滑块1时，output_total.innerHTML=+this.value++output2.innerHTML//
}
output2.innerHTML=slider2.value；
output_total.innerHTML=120；
slider2.oninput=函数（）{
output2.innerHTML=this.value；
更新滑块2时，output_total.innerHTML=+this.value++output1.innerHTML//
}

output\u total.innerHTML=parseInt（output1.innerHTML）+parseInt（output2.innerHTML）是什么意思在函数中？删除它周围的功能。感谢您的建议。我尝试了网站上建议的一些输入，但我是JavaScript的完全初学者。你能告诉我在我的代码中应该把侦听器放在哪里吗？谢谢。您应该将侦听器放在滑块

document.getElementById（“sliderID”）.addEventListener（“输入”，sliderInput）。逻辑是：每当一个滑块获得输入时（在您的场景中，您有两个滑块），您都会将侦听器放入，并且在函数
sliderInput
中，您可以读取每个滑块的值，进行添加，并将值分配到另一个标记上。这很有效！非常感谢你。