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

Question

I recently started to work on Django and JavaScript, and currently working on Range items. I successfully managed to have two functioning scales and to update their value next to them each time the user is modifying them.

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

Now, what I am trying to get is to have a value that is the sum of the two values, and that is updating as soon as the user is modifying one of the two scales. I tried the following:

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

But without success. Could you help me to achieve this? Thank you in advance.

Answer 1

Checking the code I see that you are not adding your listeners correctly, you need to fix that first. After having listeners working correctly on each slider input event, you could be computing the total and assigning it to the innerHTML as you are doing it right now.

For the listeners check this: W3Schools JS DOM listeners

Answer 2

The below code is working as per your requirement.

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