javascript 仅当我添加第二个 getElementbyId 时才连接数字

Question

请不要将其标记为重复。和下面的类似，但又不一样。

我看过：

Javascript concatenating numbers, not adding up 和： How to add two strings as if they were numbers? 和：

这是我的代码：

<!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 求和时，有效

但是，当我将 n1+n2 返回求和时，我得到了一个连接的字符串（例如 1+2 变为 12，而不是 3）。

我做错了什么？

谢谢！

Answer 1

您需要在将两个值相加之前将它们转换为数字，这样您将得到加法而不是串联。

document.getElementById("Sum").innerHTML = +document.getElementById('n1').value + +document.getElementById('n2').value  ;

Answer 2

您需要使用 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>

Answer 3

你在那里使用了两种不同的 +。与前两个：

<!-- 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上，把它变成一个数字。但是expression1和expression2之间的+不是一元加号，而是addition/concatenation。当在两个表达式之间使用 + 时，如果两者都是数字，则将它们相加。在这里，.value上的一元加号之后是一个数字，foobar也是一个数字，所以它们相加。

但是在

document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +document.getElementById('n2').value

现在，正确的表达式是 字符串 而不是数字。 + 仅在两边都是数字时才加。 someNumber + someString 导致串联。

如果要添加，确保+两边先是数字。

javascript 仅当我添加第二个 getElementbyId 时才连接数字

javascript concatenates numbers ONLY when I add a second getElementbyId

html

javascript

dom

innerhtml