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>

我希望输出将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元素解析为整数，并尝试使用未定义的变量value的{{1}}属性。关于语法选择，我包装了total函数中所需的逻辑。

calcTotalCommission

如何对两个JavaScript范围滑块的输出求和（佣金计算器）

2 个答案: