猿问

仅当我添加第二个 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）。


我究竟做错了什么？


UYOU
浏览 105回答 3
3回答

HUX布斯

您需要在将两个值相加之前将它们转换为数字，这样您将得到加法而不是串联。document.getElementById("Sum").innerHTML&nbsp;=&nbsp;+document.getElementById('n1').value&nbsp;+&nbsp;+document.getElementById('n2').value&nbsp;&nbsp;;
0

海绵宝宝撒

您需要使用 parseInt 指令将输入值转换为 int 数据类型。这是代码：&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; function pr() {&nbsp; &nbsp; &nbsp; &nbsp; var foobar = 100;&nbsp; &nbsp; &nbsp; &nbsp; <!-- works -->&nbsp; &nbsp; &nbsp; &nbsp; <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value&nbsp; ; works -->&nbsp; &nbsp; &nbsp; &nbsp; <!-- works -->&nbsp; &nbsp; &nbsp; &nbsp; <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n2').value&nbsp; ; works -->&nbsp; &nbsp; &nbsp; &nbsp; <!-- works -->&nbsp; &nbsp; &nbsp; &nbsp; <!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +foobar&nbsp; ; -->&nbsp; &nbsp; &nbsp; &nbsp; <!-- concatenates as strings: why? -->&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("Sum").innerHTML = parseInt(document.getElementById('n1').value) +parseInt(document.getElementById('n2').value)&nbsp; ;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script>
0

MMTTMM

你+在那里使用两种不同类型的 s 。前两个：<!-- works --><!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value&nbsp; ; works --><!-- works --><!-- document.getElementById("Sum").innerHTML = +document.getElementById('n2').value&nbsp; ; works -->执行的操作是leftSide = +expression这是一元加运算符，它将非数字强制转换为数字。在第三个中：<!-- works --><!-- document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +foobar&nbsp; ; -->执行的操作是leftSide = +expression1 + expression2使用一元加expression1将其转换为数字。但and+之间不是一元加法，而是加法/串联。当在两个表达式之间使用时，如果两者都是数字，则它们会相加。在这里，在 的一元加之后，它是一个数字，并且也是一个数字，所以它们被加在一起。expression1expression2+.valuefoobar但在document.getElementById("Sum").innerHTML = +document.getElementById('n1').value +document.getElementById('n2').value现在，正确的表达式是字符串而不是数字。+仅当两边都是数字时才相加。someNumber + someString结果串联。如果要加，+请先确保两边都是数字。
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答