添加两个数字会连接它们而不是计算总和

okc*_*sed 167 html javascript

我正在添加两个数字,但我没有得到正确的值.

例如,1 + 2返回12而不是3

我在这段代码中做错了什么?

function myFunction() {
  var y = document.getElementById("txt1").value;
  var z = document.getElementById("txt2").value;
  var x = y + z;
  document.getElementById("demo").innerHTML = x;
}
Run Code Online (Sandbox Code Playgroud)
<p>
  Click the button to calculate x.
  <button onclick="myFunction()">Try it</button>
</p>
<p>
  Enter first number:
  <input type="text" id="txt1" name="text1" value="1">
  Enter second number:
  <input type="text" id="txt2" name="text2" value="2">
</p>
<p id="demo"></p>
Run Code Online (Sandbox Code Playgroud)

elc*_*nrs 315

它们实际上是字符串而非数字.从字符串生成数字的最简单方法是将其添加到+:

var x = +y + +z;
Run Code Online (Sandbox Code Playgroud)

  • 上面的代码有点离奇,会让经验不足的开发人员感到困惑.代码也将使JSLint因混淆使用'+'而失败. (29认同)
  • @AKTed:其实我想激怒elclanrs在他的回答中描述一下.当然我自己无法进行谷歌搜索; 但它会(imo)提高答案的质量,特别是因为在其他编程语言中使用prefix-+进行字符串转换非常罕见,并且可能会混淆新手.(但是,感谢分享链接) (10认同)
  • 出于好奇(我自己不是一个JavaScript程序员)(我认为这会改善答案),`+`-prefix对字符串做什么? (4认同)
  • @phresnel:[一元+运算符](http://stackoverflow.com/questions/5450076/whats-the-significant-use-of-unary-plus-and-minus-operators) (2认同)
  • 我不鼓励任何人使用此快捷方式。我知道实际上将字符串解析为数字需要更多代码,但至少该代码显然符合意图。 (2认同)

ger*_*ard 118

我只是用Number():

var i=2;  
var j=3;  
var k = Number(i) + Number(j); // 5  
Run Code Online (Sandbox Code Playgroud)

  • 我一直在犯这个错误,它总是连接:`var k += Number(i)` (3认同)

mit*_*tim 28

您需要使用javaScript的parseInt()方法将字符串转换回数字.现在它们是字符串,所以添加两个字符串连接它们,这就是为什么你得到"12".

  • 鉴于 OP 的功能是添加两个用户输入的“数字”,而不是两个“整数”,我不确定 `parseInt()` 是这里的最佳选择。 (2认同)
  • @nnnnnn我认为,如果OP提供更多输入,可以使用[`parseFloat`](https://developer.mozilla.org/docs/JavaScript/Reference/Global_Objects/parseFloat)轻松修改. (2认同)
  • @Yoshi - 是的,是的,它可以,但考虑到答案实际上并没有说“parseInt()”只返回整数,并且没有解释任何“parseInt()”的“怪癖”——这可能是用户输入数据的问题 - 我认为值得一提。(我实际上并没有投反对票或任何东西。) (2认同)

Zor*_*ayr 22

使用parseInt(...)但请确保指定基数值; 否则你会遇到几个错误(如果字符串以"0"开头,基数是八进制/ 8等).

var x = parseInt(stringValueX, 10);
var y = parseInt(stringValueY, 10);

alert(x + y);
Run Code Online (Sandbox Code Playgroud)

希望这可以帮助!

  • 我不确定`parseInt()`是最好的选择,因为OP的功能是添加两个用户输入的"数字",而不是两个"整数". (5认同)
  • 除非他期望浮点值,否则我认为使用这种方法仍然很有效。 (2认同)
  • 这在 ES6 中不再是问题。可以安全地省略基数。`parseInt("012")` 工作正常,返回 12。当然,你仍然需要小心像 `[1,2].map(parseInt)` 这样的东西。 (2认同)

Man*_*ngo 10

以下内容在一般情况下可能有用。

  • 首先,HTML 表单字段仅限于text。这尤其适用于文本框,即使您已经煞费苦心地确保该值看起来像一个数字。

  • 其次,无论好坏,JavaScript 都重载了+具有两种含义的运算符:添加数字和连接字符串。它偏好连接,所以即使是像这样的表达式3+'4'也会被视为连接。

  • 第三,如果可以,并且需要的话,JavaScript 将尝试动态更改类型。例如,'2'*'3'将两种类型都更改为数字,因为您不能将字符串相乘。如果其中之一不兼容,您将得到NaN, Not a Number。

出现您的问题是因为来自表单的数据被视为字符串,+因此将连接而不是添加。

从表单中读取所谓的数字数据时,您应该始终将其推送到parseInt()parseFloat(),具体取决于您想要整数还是小数。

请注意,这两个函数都没有真正字符串转换为数字。相反,它会从左到右解析字符串,直到它得到一个无效的数字字符或最后,并转换已被接受的内容。在 的情况下parseFloat,这包括一位小数点,但不包括两位。

有效数字之后的任何内容都会被忽略。如果字符串甚至不是以数字开头,它们都会失败。然后你会得到NaN

来自表单的数字的一个很好的通用技术是这样的:

var data=parseInt(form.elements['data'].value); //  or parseFloat
Run Code Online (Sandbox Code Playgroud)

如果您准备将无效字符串合并为 0,则可以使用:

var data=parseInt(form.elements['data'].value) || 0;
Run Code Online (Sandbox Code Playgroud)


Pus*_*ngh 6

这不会总结出数字;相反,它将连接它:

var x = y + z;
Run Code Online (Sandbox Code Playgroud)

你需要做:

var x = (y)+(z);
Run Code Online (Sandbox Code Playgroud)

您必须使用 parseInt 来指定对数字的操作。例子:

var x = parseInt(y) + parseInt(z); [final soulution, as everything us]
Run Code Online (Sandbox Code Playgroud)


小智 5

boss只是添加一个简单的类型转换方法,因为输入是在文本使用后面进行的

    var y = parseInt(document.getElementById("txt1").value);
    var z = parseInt(document.getElementById("txt2").value);
    var x = y + z;
Run Code Online (Sandbox Code Playgroud)


Mur*_*ain 5

简单

var result = parseInt("1") + parseInt("2");
console.log(result ); // Outputs 3
Run Code Online (Sandbox Code Playgroud)