如何對兩個 javascript 范圍滑塊的 output 求和（佣金計算器）

Question

我正在使用滑塊創建佣金計算器。 我有兩個滑塊，我希望能夠顯示它們的總和。 我有兩個輸出，但我不知道如何將其轉換為總數。

 var comslider = document.getElementById("sale"); var comoutput = document.getElementById("saleprice"); comoutput.innerHTML = comslider.value; // Display the default slider value // Update the current slider value (each time you drag the slider handle) comslider.oninput = function() { comoutput.innerHTML = this.value; } var slider = document.getElementById("commission_range"); var output = document.getElementById("commission"); // output += (commission / 100); output.innerHTML = slider.value; // Display the default slider value // Update the current slider value (each time you drag the slider handle) slider.oninput = function() { output.innerHTML = this.value; } // This is what I have tried var salep = document.getElementById("saleprice"); var comp = document.getElementById("commission"); var total = parseInt(salep) * parseInt(comp); // var totalout = document.getElementById("total_commission"); // totalout.innerHTML = total.value; document.write(total); // total.oninput = function() {total.innerHTML = this.value;}

 <div class="slidecontainer"> <p>Final sale price of home:</p> <input type="range" min="0" max="3000000" value="500000" class="slider" id="sale"> </div> <div class="slidecontainer"> <p>Final sale price of home:</p> <input type="range" min="0" max="6" value="3" class="slider" id="commission_range" step="0.1"> </div> <div class="outputbox"> <p>Final sale price of home: <span id="saleprice"></span></p> <p>Commission percentage: <span id="commission"></span>%</p> <p>Total commission: <span id="total_commission"></span></p> </div>

我希望 output 將sale價值乘以 ('commission'/100) 以產生計算出的佣金成本。

Answer 1

您正在獲取元素而不是值。

var salep = document.getElementById("saleprice");
var comp = document.getElementById("commission");

然后你正在解析和添加元素，而不是值。

var total = parseInt(salep) * parseInt(comp);

利用

var salep = document.getElementById("saleprice").innerHTML;
var comp = document.getElementById("commission").innerHTML;

Answer 2

我可以看到您最大的錯誤是嘗試將 html 元素解析為 integer 並嘗試使用未定義的變量total的value屬性。 關於您的語法選擇，我在calcTotalCommission function 中總結了您想要的邏輯。

  
  
  
 
   
 
    
var comslider = document.getElementById("sale");
var comoutput = document.getElementById("saleprice");
var salep = document.getElementById("saleprice");
var comp = document.getElementById("commission");
var totalout = document.getElementById("total_commission");
var slider = document.getElementById("commission_range");
var output = document.getElementById("commission");

comoutput.innerHTML = comslider.value; // Display the default slider value
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
comslider.oninput = function() {
  comoutput.innerHTML = this.value;
  calcTotalCommission();
}

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
  calcTotalCommission();
}

// Update the totalCommision number with current values
function calcTotalCommission(price, percentage) {
  var total = parseInt(salep.innerHTML) * (parseFloat(comp.innerHTML) / 100);
  totalout.innerHTML = total.toFixed(2);
}
 
    
    <div class="slidecontainer">
      <p>Final sale price of home:</p>
      <input type="range" min="0" max="3000000" value="500000" class="slider" id="sale">
    </div>


    <div class="slidecontainer">
      <p>Final sale price of home:</p>
      <input type="range" min="0" max="6" value="3" class="slider" id="commission_range" step="0.1">
    </div>


    <div class="outputbox">
      <p>Final sale price of home: <span id="saleprice"></span></p>
      <p>Commission percentage: <span id="commission"></span>%</p>
      <p>Total commission: <span id="total_commission"></span></p>
    </div>