仅当我添加第二个 getElementbyId 时，javascript 才会连接数字
请不要将此标记为重复。与下面的类似，但又不一样。
我看过：
Javascript 连接数字，而不是相加 ： 如何将两个字符串像数字一样相加？ 并且： innerHTML 返回带有文本的 NaN
这是我的代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<form action="PayslipServlet" method="get">
First Number: <input type="text" name="n1" id="n1"><br/>
Second Number: <input type="text" name="n2" id="n2"><br/>
Sum: <span id="Sum"></span>
<br>
<input type="button" value="Submit" onClick="pr()">
</form>
<script>
function pr() {
var foobar = 100;
<!-- works -->
<!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value ; works -->
<!-- works -->
<!-- document.getElementById("Sum").innerHTML = +document.getElementById('n2').value ; works -->
<!-- works -->
<!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +foobar ; -->
<!-- concatenates as strings: why? -->
document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +document.getElementById('n2').value ;
}
</script>
</head>
问题陈述：
当我将 n1 反馈给 sum 时，有效（请参阅注释行） 当我将 n2 反馈给 sum 时，有效 当我将 n1+foobar 反馈给 sum 时，有效
但是，当我将 n1+n2 反馈给 sum 时，我得到一个连接字符串（例如 1+2 变成 12，而不是 3）。
我究竟做错了什么？
UYOU3回答
-
HUX布斯
您需要在将两个值相加之前将它们转换为数字，这样您将得到加法而不是串联。document.getElementById("Sum").innerHTML = +document.getElementById('n1').value + +document.getElementById('n2').value ; -
海绵宝宝撒
您需要使用 parseInt 指令将输入值转换为 int 数据类型。这是代码： <script> function pr() { var foobar = 100; <!-- works --> <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value ; works --> <!-- works --> <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n2').value ; works --> <!-- works --> <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +foobar ; --> <!-- concatenates as strings: why? --> document.getElementById("Sum").innerHTML = parseInt(document.getElementById('n1').value) +parseInt(document.getElementById('n2').value) ; } </script> -
MMTTMM
你+在那里使用两种不同类型的 s 。前两个：<!-- works --><!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value ; works --><!-- works --><!-- document.getElementById("Sum").innerHTML = +document.getElementById('n2').value ; works -->执行的操作是leftSide = +expression这是一元加运算符，它将非数字强制转换为数字。在第三个中：<!-- works --><!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +foobar ; -->执行的操作是leftSide = +expression1 + expression2使用一元加expression1将其转换为数字。但and+之间不是一元加法，而是加法/串联。当在两个表达式之间使用时，如果两者都是数字，则它们会相加。在这里，在 的一元加之后，它是一个数字，并且也是一个数字，所以它们被加在一起。expression1expression2+.valuefoobar但在document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +document.getElementById('n2').value现在，正确的表达式是字符串而不是数字。+仅当两边都是数字时才相加。someNumber + someString结果串联。如果要加，+请先确保两边都是数字。
随时随地看视频慕课网APP
相关分类
Html5