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

Question

我正在为一个客户构建2个滑块，并且需要能够将每个滑块的结果相加并显示在“费用”部分中。我能够单独创建2滑块，但正在努力使它们协同工作。

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>

“费用”部分需要将客人和时间加在一起。

Answer 1

如果您要处理事件，则可以完成工作

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>