在JavaScript中添加2个函数的输出的问题

Question

I am building 2 sliders for a client and need to be able to add the result of each together and display it in the cost section. I am able to create the 2 slider separately but am struggling to get them to work together.

 var slider1 = document.getElementById("myRange1"); var slider2 = document.getElementById("myRange2"); var output1 = document.getElementById("guests"); var output2 = document.getElementById("hours"); var price = document.getElementById("cost"); slider1.oninput = function() { output1.innerHTML = this.value; } slider2.oninput = function() { output2.innerHTML = this.value; } document.getElementById("guests", "hours").addEventListener("oninput", function() { price.innerHTML = output1.textContent + output2.textContent; }) 

 .slidecontainer { width: 100%; } .slider1, .slider2 { -webkit-appearance: none; width: 100%; height: 25px; border-radius: 50px; background: #8300e9; outline: none; } .slider1::-webkit-slider-thumb, .slider2::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 35px; height: 35px; border-radius: 50%; background: #ffffff; cursor: pointer; } .slider1::-moz-range-thumb, .slider2::-moz-range-thumb { width: 25px; height: 25px; background: #4CAF50; cursor: pointer; } 

 <div> <p>Guests: <span id="guests"></span></p> </div> <div class="slidecontainer"> <input type="range" min="0" max="250" value="0" step="10" class="slider1" id="myRange1"> </div> <br> <div> <p>Hours: <span id="hours"></span></p> </div> <div class="slidecontainer"> <p><input type="range" min="0" max="12" value="0" step="1" class="slider2" id="myRange2"></p> <br> <p>Cost: <span id="cost"></span></p> </div> 

The cost section needs to add the guests and hours together.

Answer 1

If you want to handle events, This will do the work

 var slider1 = document.getElementById("myRange1"); var slider2 = document.getElementById("myRange2"); var output1 = document.getElementById("guests"); var output2 = document.getElementById("hours"); var price = document.getElementById("cost"); var totalCost = 0; slider1.oninput = function() { output1.innerHTML = this.value; callSum(); } slider2.oninput = function() { output2.innerHTML = this.value; callSum(); } var callSum = function(value) { if (parseInt(output1.textContent) && parseInt(output2.textContent)) { price.innerHTML = 250 + 20 * (parseInt(output1.textContent) /10 -1) + parseInt(output2.textContent) * 10; } } 

 .slidecontainer { width: 100%; } .slider1, .slider2 { -webkit-appearance: none; width: 100%; height: 25px; border-radius: 50px; background: #8300e9; outline: none; } .slider1::-webkit-slider-thumb, .slider2::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 35px; height: 35px; border-radius: 50%; background: #ffffff; cursor: pointer; } .slider1::-moz-range-thumb, .slider2::-moz-range-thumb { width: 25px; height: 25px; background: #4CAF50; cursor: pointer; } 

 <div> <p>Guests: <span id="guests"></span></p> </div> <div class="slidecontainer"> <input type="range" min="0" max="250" value="0" step="10" class="slider1" id="myRange1"> </div> <br> <div> <p>Hours: <span id="hours"></span></p> </div> <div class="slidecontainer"> <p><input type="range" min="0" max="12" value="0" step="1" class="slider2" id="myRange2"></p> <br> <p>Cost: <span id="cost"></span></p> </div>