将两个数字相加是将它们连接起来，而不是计算总和-解网

问：

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

例如，doing 返回 12 而不是 31 + 2

我在这个代码中做错了什么？

function myFunction() {
  var y = document.getElementById("txt1").value;
  var z = document.getElementById("txt2").value;
  var x = y + z;
  document.getElementById("demo").innerHTML = x;
}

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

JavaScript 的HTML

1赞 Zorayr 1/24/2013

您期望什么类型的值作为输入？整数还是小数？

2赞 hank 1/24/2013

文本输入值将是字符串，字符串将始终连接而不是相加

2赞 akTed 1/24/2013

关于转换的好文章在这个答案中。

2赞 Organic Advocate 7/12/2017

如何添加两个字符串，就好像它们是数字一样的可能重复？

3赞 Sebastian Simon 8/31/2018

如果你有一个，你可以直接获取它的属性。<input type="number">.valueAsNumber

答：

443赞 elclanrs 1/24/2013 #1

它们实际上是字符串，而不是数字。从字符串生成数字的最简单方法是在它前面加上：+

var x = +y + +z;

7赞 Sebastian Mach 1/24/2013

出于好奇（我自己不是 JavaScript 程序员）（我认为这会改善答案），-prefix 对字符串有什么作用？+

39赞 Zorayr 1/24/2013

上面的代码有点奇怪，会让经验不足的开发人员感到困惑。该代码还将因混淆“+”的使用而使 JSLint 失败。

3赞 akTed 1/24/2013

@phresnel：一元 + 运算符

15赞 Sebastian Mach 1/24/2013

@AKTed：其实我想激怒elclanrs，在他的回答中描述一下。当然，我并非不能自己进行谷歌搜索;但它会（IMO）提高答案的质量，特别是因为使用prefix-+进行字符串转换在其他编程语言中非常罕见，并且可能会让新手感到困惑。（但是，感谢您分享链接）

5赞 Si Kelly 5/10/2017

我不鼓励任何人使用此快捷方式。我知道实际上将字符串解析为数字需要更多的代码，但至少代码显然符合意图。

31赞 mitim 1/24/2013 #2

您需要使用 JavaScript 的方法将字符串转换回数字。现在它们是字符串，所以添加两个字符串会将它们连接起来，这就是你得到“12”的原因。parseInt()

3赞 nnnnnn 1/24/2013

我不确定这里是最好的选择，因为 OP 的函数是添加两个用户输入的“数字”，而不是两个“整数”。parseInt()

3赞 Yoshi 1/24/2013

@nnnnnn我认为，如果 OP 提供更多输入，可以很容易地用 parseFloat 进行修改。

2赞 nnnnnn 1/24/2013

@Yoshi - 是的，是的，它可以，但鉴于答案实际上并没有说任何只返回整数的地方，也没有解释任何“怪癖”——这可能是用户输入数据的问题——我认为这值得一提。（我实际上没有投反对票或任何东西。parseInt()parseInt()

1赞 mitim 1/24/2013

是的，我假设输入将是整数，因为他们给出了 1 + 2 的示例，但你是对的 - parseFloat（）如果它们只是任何“数字”，它们可能会更好。

24赞 Zorayr 1/24/2013 #3

使用 parseInt（...），但请确保指定基数值;否则，您将遇到几个错误（如果字符串以“0”开头，则基数为八进制/8 等）。

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

alert(x + y);

希望这有帮助！

7赞 nnnnnn 1/24/2013

我不确定这里是最好的选择，因为 OP 的函数是添加两个用户输入的“数字”，而不是两个“整数”。parseInt()

2赞 Zorayr 1/24/2013

除非他期望浮点值，否则我认为使用这种方法仍然很有效。

3赞 9/24/2016

这在 ES6 中不再是问题。可以安全地省略基数。工作正常，返回 12。当然，您仍然需要小心诸如 .parseInt("012")[1,2].map(parseInt)

1赞 Ram 1/24/2013 #4

您可以使用正则表达式进行预检查，因为它们是数字，就像

function myFunction() {
    var y = document.getElementById("txt1").value;
    var z = document.getElementById("txt2").value;
    if((x.search(/[^0-9]/g) != -1)&&(y.search(/[^0-9]/g) != -1))
      var x = Number(y)+ Number(z);
    else
      alert("invalid values....");
    document.getElementById("demo").innerHTML = x;
  }

1赞 hank 1/24/2013

您可以只使用 parseXX 并检查 NaN 返回值，而不是正则表达式。

1赞 nnnnnn 1/24/2013

验证用户输入的数据始终是一个不错的计划，但您仍需要将输入字符串转换为数字形式，然后才能进行数字加法。

8赞 Vibhav Shreshth 9/28/2013 #5

只需添加一个简单的类型转换方法，因为输入是以文本形式进行的。使用以下命令：

    var y = parseInt(document.getElementById("txt1").value);
    var z = parseInt(document.getElementById("txt2").value);
    var x = y + z;

2赞 user3056602 12/2/2013 #6

这很简单：

<html>

    <body>
        <p>Click the button to calculate x.</p>
        <button onclick="myFunction()">Try it</button>
        <br/>
        <br/>Enter first number:
        <input type="text" id="txt1" name="text1">Enter second number:
        <input type="text" id="txt2" name="text2">
        <p id="demo"></p>

        <script>
            function myFunction() {
                var y = document.getElementById("txt1").value;
                var z = document.getElementById("txt2").value;
                var x = +y + +z;
                document.getElementById("demo").innerHTML = x;
            }
        </script>
    </body>
</html>

168赞 gerard 12/10/2013 #7

我只是使用：Number()

var i = "2";  
var j = "3";  
var k = Number(i) + Number(j); // 5

4赞 John Phelps 5/30/2019

我一直在犯这个错误，它总是让人联想到：var k += Number(i)

0赞 computercarguy 10/26/2023

使用该方法确实可以将字符串转换为数值，但在此示例中，i 和 j 已经是数值变量。令我惊讶的是，在这十年中，没有人提到这个答案已经存在。Number

-3赞 2 revs, 2 users 75%user3201772 #8

另一种解决方案，只是分享:)：

var result=eval(num1)+eval(num2);

1赞 Paul Draper 3/27/2015

不像使用jQuery算术插件那么好，但我喜欢它。

0赞 Manngo 9/19/2020

原则上，没有错，但绝不应将 eval 用于用户数据。eval()

1赞 Manngo 9/19/2020

@PaulDraper我认为使用jQuery插件完成如此简单的任务是矫枉过正的，尤其是当JavaScript有一个内置的解决方案时。

2赞 Mohammed Ebrahim 6/13/2014 #9

试试这个：

<!DOCTYPE html>
<html>

    <body>
        <p>Add Section</p>

        <label>First Number:</label>
        <input id="txt1"  type="text"/><br />
        <label>Second Number:</label>
        <input id="txt2"  type="text"/><br />

        <input type="button" name="Add" value="Add" onclick="addTwoNumber()"/>
        <p id="demo"></p>

        <script>
            function myFunction() {
                document.getElementById("demo").innerHTML = Date();
            }

            function addTwoNumber(){
                var a = document.getElementById("txt1").value;
                var b = document.getElementById("txt2").value;

                var x = Number(a) + Number(b);
                document.getElementById("demo").innerHTML = "Add Value: " + x;
            }
        </script>
    </body>
</html>

6赞 Murtaza Khursheed Hussain 1/15/2015 #10

简单

var result = parseInt("1") + parseInt("2");
console.log(result ); // Outputs 3

2赞 sharjeel 3/1/2015 #11

在添加步骤中缺少类型转换...
应该是var x = y + z;var x = parseInt(y) + parseInt(z);

 <!DOCTYPE html>

 <html>
 <body>
  <p>Click the button to calculate x.</p>
  <button onclick="myFunction()">Try it</button>
  <br/>
  <br/>Enter first number:
  <input type="text" id="txt1" name="text1">Enter second number:
  <input type="text" id="txt2" name="text2">
  <p id="demo"></p>
 <script>
    function myFunction() 
    {
      var y = document.getElementById("txt1").value;
      var z = document.getElementById("txt2").value;
      var x = parseInt(y) + parseInt(z);
      document.getElementById("demo").innerHTML = x;
    }
 </script>
 </body>
 </html>

3赞 Lakshmi 12/11/2015 #12

    <head>
        <script type="text/javascript">
            function addition()
            {
                var a = parseInt(form.input1.value);
                var b = parseInt(form.input2.value);
                var c = a+b
                document.write(c);
            }
        </script>
    </head>

    <body>
        <form name="form" method="GET">
        <input type="text" name="input1" value=20><br>
        <input type="text" name="input2" value=10><br>
        <input type="button" value="ADD" onclick="addition()">
        </form>
    </body>
</html>

3赞 Chilion 12/11/2015

欢迎来到 SO！你能再解释一下吗？你的答案只是代码，所以它可能会起作用，但提问者（或其他访问者）可能不明白它为什么会起作用。

4赞 taha 1/10/2016 #13

此代码将两个变量相加！把它放到你的函数中

var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = (y +z);
document.getElementById("demo").innerHTML = x;`

2赞 Asad Ali 7/26/2016 #14

如果我们有两个输入字段，那么从输入字段中获取值，然后使用 JavaScript 添加它们。

$('input[name="yourname"]').keyup(function(event) {
    /* Act on the event */
    var value1 = $(this).val();
    var value2 = $('input[name="secondName"]').val();
    var roundofa = +value2+ +value1;

    $('input[name="total"]').val(addition);
});

8赞 Pushp Singh 8/18/2016 #15

这不会总结这个数字;相反，它将连接它：

var x = y + z;

您需要做：

var x = (y)+(z);

您必须使用 parseInt 才能指定对数字的操作。例：

var x = parseInt(y) + parseInt(z); [final soulution, as everything us]

0赞 MR_AMDEV 4/21/2019

这应该是正确的答案，而不是公认的答案。additionsubtraction

1赞 Manoj Krishna 12/1/2016 #16

下面通过解析函数中的变量来编写代码。

function myFunction() {
  var y = parseInt(document.getElementById("txt1").value);
  var z = parseInt(document.getElementById("txt2").value);
  var x = y + z;
  document.getElementById("demo").innerHTML = x;
}

<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Try it</button>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">
<br>Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>

答

1赞 Poorna Rao 5/10/2017 #17

使用它会将字符串转换为数字，包括十进制值。parseFloat

 function myFunction() {
      var y = document.getElementById("txt1").value;
      var z = document.getElementById("txt2").value;
      var x = parseFloat(y) + parseFloat(z);
      document.getElementById("demo").innerHTML = x;
    }

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

1赞 Ahmad Ajaj 5/30/2017 #18

  <input type="text" name="num1" id="num1" onkeyup="sum()">
  <input type="text" name="num2" id="num2" onkeyup="sum()">
  <input type="text" name="num2" id="result">

  <script>
     function sum()
     {

        var number1 = document.getElementById('num1').value;
        var number2 = document.getElementById('num2').value;

        if (number1 == '') {
           number1 = 0
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').value = num3;
        }
        else if(number2 == '')
        {
           number2 = 0;
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').value = num3;
        }
        else
        {
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').value = num3;
        }

     }
  </script>

3赞 ρяσѕρєя K 5/30/2017

添加一些解释和答案，说明此答案如何帮助 OP 解决当前问题

0赞 P.A.010 1/26/2018 #19

你也可以这样写：变量 z = x - -y ; 你会得到正确的答案。

<body>

<input type="text" id="number1" name="">
<input type="text" id="number2" name="">
<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

    <script>
    function myFunction() {
        var x, y ;

        x = document.getElementById('number1').value;
        y = document.getElementById('number2').value;

        var z = x - -y ;

        document.getElementById('demo').innerHTML = z;
    }
    </script>
</body>

15赞 Manngo 4/10/2018 #20

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

首先，HTML 表单字段仅限于文本。这尤其适用于文本框，即使您已经煞费苦心地确保该值看起来像一个数字。
其次，无论好坏，JavaScript 都使运算符重载了两个含义：它添加数字，以及连接字符串。它偏爱串联，因此即使是像这样的表达式也会被视为串联。+3+'4'
第三，如果可以的话，JavaScript 会尝试动态地更改类型，如果需要的话。例如，将两种类型都更改为数字，因为您不能将字符串相乘。如果其中一个不兼容，你会得到，而不是一个数字。'2'*'3'NaN

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

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

请注意，这两个函数都不会真正将字符串转换为数字。相反，它将从左到右解析字符串，直到它到达无效的数字字符或末尾并转换已接受的内容。在的情况下，它包括一个小数点，但不包括两个小数点。parseFloat

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

对于表单中的数字，一个好的通用技术是这样的：

var data=parseInt(form.elements['data'].value); //  or parseFloat

如果准备将无效字符串合并为 0，可以使用：

var data=parseInt(form.elements['data'].value) || 0;

3赞 George Tiganila 9/2/2020 #21

或者你可以简单地初始化

变量 x = 0;（您应该使用 let x = 0;

这样，它将添加而不是连接。

3赞 Jay Momaya 9/8/2020 #22

如果没有任何效果，那么只试试这个。这可能不是正确的方法，但当上述所有方法都失败时，它对我有用。

 var1 - (- var2)

1赞 Wiktor Zychla 10/6/2022

不错，虽然仍然很棘手，但可能比更容易接受。+x + +y

2赞 Darren 9/29/2020 #23

这也可以通过使用输出元素的更本机的 HTML 解决方案来实现。

<form oninput="result.value=parseInt(a.valueAsNumber)+parseInt(b.valueAsNumber)">
  <input type="number" id="a" name="a" value="10" /> +
  <input type="number" id="b" name="b" value="50" /> =
  <output name="result" for="a b">60</output>
</form>

https://jsfiddle.net/gxu1rtqL/

该元素可以用作用户操作的计算或输出的容器元素。您还可以将 HTML 类型从更改为，并使用不同的 UI 元素保留相同的代码和功能，如下所示。outputnumberrange

<form oninput="result.value=parseInt(a.valueAsNumber)+parseInt(b.valueAsNumber)">
  <input type="range" id="a" name="a" value="10" /> +
  <input type="number" id="b" name="b" value="50" /> =
  <output name="result" for="a b">60</output>
</form>

https://jsfiddle.net/gxu1rtqL/2/

-3赞 G. Trialonis 2/25/2021 #24

也许您可以使用此函数来添加数字：

function calculate(a, b) {
  return a + b
}
console.log(calculate(5, 6))

上一个：将对象添加到 NgRx reducer 中 state 中包含的另一个对象中的子对象数组中

下一个：如何对数据项进行分组，并通过汇总相关值来合并其属性？

将两个数字相加是将它们连接起来，而不是计算总和

Adding two numbers concatenates them instead of calculating the sum

评论

评论

评论

评论

评论

评论

评论

评论

评论

评论

评论