时间戳

首页 > 解决方案 > JavaScript：更新两个范围值之和的值

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

问题描述

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

<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;
    }

现在，我想要得到的是一个值，它是两个值的总和，并且一旦用户修改两个比例之一，它就会更新。我尝试了以下方法：

<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);
}

但没有成功。你能帮我实现这一目标吗？先感谢您。

标签： javascript

解决方案

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

对于侦听器，请检查：W3Schools JS DOM listeners

推荐阅读