document.getElementById().value无效

Question

我想自动计算价格+佣金(12%)并自动输入结果.例如:100 $ + 12%佣金= 112 $.问题在这里我的结果是10012.

我在哪里写错了我的代码:

<input type="value" class="form-control" id="input">
<input type="value" id="output" onkeyup="calc();"/>
<input id="finalprice" onkeyup="calc();"/>
<script>
function calc() {
  var a = document.getElementById("input").value;
  var b = (12/100) ;
  var c = b * 100;
  var e = a + c;
  var f = a + e;
  document.getElementById("output").value = c;
  document.getElementById("finalprice").value = f;
}
</script>

Answer 1

您获得10012因为值以字符串形式连接在一起.您需要解析输入的值以允许进行计算.我重写了代码以简化它.因此,将您的金额输入第一个文本输入(#input),将速率输入第二个文本输入(#percentage)将为您提供第三个文本框中的总金额(#finalprice).

function calc() {
  var amount = parseFloat(document.getElementById("input").value);
  var rate = parseFloat(document.getElementById("percentage").value)/100;
  var calculatedValue = amount * rate
  document.getElementById("finalprice").value = amount + calculatedValue;
}

<input type="text" class="form-control" id="input">
<input type="text" id="percentage" onkeyup="calc();"/>
<input type = "text" id="finalprice"/>