时间戳

首页 > 解决方案 > javascript 仅在我添加第二个 getElementbyId 时才连接数字

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

问题描述

请不要将此标记为重复。它与以下类似，但不一样。

我看过：

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）。

我究竟做错了什么？

谢谢！

标签： javascripthtmldominnerhtml

解决方案

您需要在添加它们之前将这两个值转换为数字，因此您将获得加法而不是连接。

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

推荐阅读