Javascript百分比计算器加法器功能不起作用[重复]

Question

这个问题在这里已有答案：

• How to add two strings as if they were numbers? 20个答案

我正在构建一个百分比计算器来学习JavaScript。以下是我的尝试。

其中一个函数工作正常（从数字中取百分比的那个），但是将数字百分比添加到数字的函数似乎是添加值，就像它们是一个字符串。我已经找到了解决方案，并且使用parseInt()似乎突然出现了一些但我似乎无法用我现在的代码实现它所以我希望有人可以提供帮助。

function myFunction() {
  var per = document.getElementById("input1").value;
  var num = document.getElementById("input2").value;
  var sum = num / 100 * per;
  var output = num - sum;

  console.log(output);

  document.getElementById("demo").innerHTML = output;

}


function myFunction2() {
  var per = document.getElementById("input3").value;
  var num = document.getElementById("input4").value;
  var sum = num / 100 * per;
  var output = sum + num;

  console.log(output);

  document.getElementById("demo1").innerHTML = output;

}

<section id="number less percentage"></section>

<h1>Number less percentage</h1>

<input id="input2" placeholder="enter the number"></input>

<input id="input1" placeholder="enter percentage of a number"></input>

<button value='send' id="submit" onclick="myFunction()">Click for 
    result</button>

<p id="demo"></p>

</section>

<section id="number plus percentage"></section>

<h1>Number plus percentage</h1>

<input id="input4" placeholder="enter the number"></input>

<input id="input3" placeholder="enter percentage of a number"></input>

<button value='send' id="submit" onclick="myFunction2()">Click for 
    result</button>

<p id="demo1"></p>

</section>

Answer 1

在涉及数字和添加时，JavaScript有点滑稽。例如：

'20' - '30' === 10      // `-` always coerces operands to numbers
'20' + '30' === '2030'  // `+` with strings is interpreted as concatenation

从document.getElementById返回的值是字符串，因此最好在继续加法或减法之前将它们全部解析（甚至是有效的）。您的代码可以是：

function calculate() {
  var per = parseInt(document.getElementById('input1').value);
  var num = parseInt(document.getElementById('input2').value);

  var sum = (num / 100) * per;
  var output = num - sum;

  console.log(output);

  document.getElementById('demo').innerHTML = output;
}

function myFunction2() {
  var per = parseInt(document.getElementById('input3').value);
  var num = parseInt(document.getElementById('input4').value);

  var sum = (num / 100) * per;
  var output = sum + num;

  console.log(output);

  document.getElementById('demo1').innerHTML = output;
}