基本的JavaScript函数返回连接而不是算术和[重复]答案

【问题标题】：Basic JavaScript function returns concatenation and not arithmetic sum [duplicate]基本的JavaScript函数返回连接而不是算术和[重复]
【发布时间】：2017-06-21 22:41:54
【问题描述】：

我是新手，所以感谢您的耐心等待。我确实搜索了很多答案但找不到，可能是因为它太明显了。

在这种情况下，输入 x 和 y 取自 <input type="number"..

此函数在按钮单击时执行。

你能告诉我为什么它返回一个连接，例如33 代替 6，45 代替 9。

  function sum(x,y) {
       x = document.getElementById("x").value;
       y = document.getElementById("y").value;
       var answer = x+y;

       document.getElementById("sum").innerHTML = answer;

  }

非常感谢。

【问题讨论】：

因为你得到的值是字符串，你需要将它们转换为数字。仅在 SO 上，这个问题就必须有一百万个重复。现在正在寻找...
.value 总是返回一个字符串。因此，告诉 JS 将其解释为数字，例如使用 ....value * 1 或 parseInt，或 parseFloat，或...

标签： javascript

【解决方案1】：

你需要把它转换成数字。

function sum(x,y) {
   x = document.getElementById("x").value;
   y = document.getElementById("y").value;
   var answer = Number(x)+Number(y);

   document.getElementById("sum").innerHTML = answer;

}

【讨论】：

【解决方案2】：

因为当您将字符串放在 + 运算符的任一侧时，它会执行连接。

"3" + "3" // "33"

输入的 value 属性总是会给你一个字符串。

Convert the strings to numbers 如果你想把它们加在一起。

【讨论】：

输入的 value 属性总是会给你一个字符串。 - 输入类型为“数字”时为奇数，初始化。谢谢，这解释了问题！

【解决方案3】：

这是因为x和y是字符串，要正确操作它们，请使用Number(x) + Number(y)或parseFloat(x) + parseFloat(y)

【讨论】：

【解决方案4】：

您想使用parseInt 函数将字符串实际转换为整数，然后像这样添加它们

function sum(x,y) {
   x = parseInt(document.getElementById("x").value);
   y = parseInt(document.getElementById("y").value);
   var answer = x+y;

   document.getElementById("sum").innerHTML = answer;

}

【讨论】：