将两个数字相加即可将其连接起来，而不是计算总和

184

我将两个数字相加，但得不到正确的值。

例如，1 + 2返回12而不是3

我在此代码中做错了什么？

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 
— 好困惑
source
您希望输入什么类型的值？整数还是小数？
— Zorayr
1
文本输入值将是字符串，并且字符串将始终串联而不是加法
— hank
1
这个答案很好地记录了转换。
— akTed
1
— Organic Advocate
如果您有个<input type="number">，则可以.valueAsNumber直接直接获取其属性。
— user4642212

Answers:

341

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

var x = +y + +z;
— 氏族
source
4
出于好奇（我自己不是JavaScript程序员）（我认为这会改善答案），- +prefix对字符串有何作用？
— 塞巴斯蒂安·马赫
30
上面的代码有些奇怪，会使经验不足的开发人员感到困惑。该代码还将使JSLint无法使用'+'混淆。
— Zorayr
2
@phresnel：一元+运算符
— akTed
10
@AKTed：其实我想挑拨其他人在他的回答中描述它。当然我不是无法自己进行Google搜索；但这会（imo）改善答案的质量，尤其是因为在其他编程语言中很少使用prefix- +进行字符串转换，这可能会使新手感到困惑。（不过，感谢您分享链接）
— Sebastian Mach
2
我不鼓励任何人使用此快捷方式。我知道实际上将字符串解析为数字需要更多代码，但至少该代码显然符合意图。
— 凯利
29

您需要使用javaScript的parseInt()方法将字符串重新转换为数字。现在它们是字符串，因此添加两个字符串可以将它们连接起来，这就是为什么要获得“ 12”的原因。

— 米蒂姆
source
1
parseInt()考虑到OP的功能是添加两个用户输入的“数字”，而不是两个“整数”，因此我不确定这里是否是最佳选择。
— nnnnnn
2
@nnnnnn我认为，如果parseFloatOP提供更多输入，可以很容易地对其进行修改。
— Yoshi
1
@Yoshi-是的，可以，但是鉴于答案实际上并没有说parseInt()仅返回整数的任何地方，并且没有解释任何parseInt()“怪癖”-这可能是用户输入数据的问题-我认为值得一提。（我实际上并没有投票赞成什么。）
— nnnnnn
是的，我已经假设输入将是整数，因为它们给出了1 + 2的示例，但是您是对的-如果parseFloat（）只是任何“数字”，则可能会更好。
— mitim
22

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

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

alert(x + y);

希望这可以帮助！

— 佐拉尔
source
5
parseInt()考虑到OP的功能是添加两个用户输入的“数字”，而不是两个“整数”，因此我不确定这里是否是最佳选择。
— nnnnnn
1
除非他期望浮点值，否则我认为使用此方法仍然有效。
— Zorayr
1
在ES6中，这不再是问题。基数可以安全地省略。parseInt("012")可以正常工作，返回12。当然，您仍然必须注意[1,2].map(parseInt)。
6

只需添加一种简单的类型转换方法，因为输入是文本输入。使用以下内容：

    var y = parseInt(document.getElementById("txt1").value);
    var z = parseInt(document.getElementById("txt2").value);
    var x = y + z;
— 维巴夫·史瑞斯
source
6

一般而言，以下内容可能有用。

  • 首先，HTML表单字段仅限于text。即使您不遗余力地确保该值看起来像一个数字，这也特别适用于文本框。

  • 其次，无论是好是坏，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;
— 曼戈
source
4

这不会汇总数字；而是将其串联起来：

var x = y + z;

您需要做：

var x = (y)+(z);

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

var x = parseInt(y) + parseInt(z); [final soulution, as everything us]
— 普什普·辛格
source
这应该是正确的答案，addition而subtraction不是公认的答案。
— MR_AMDEV
3

此代码将两个变量加在一起！放入您的函数

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

您在添加步骤中缺少类型转换...
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>
— 沙耶尔
source
1 
  <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>
— 艾哈迈德·阿杰（Ahmad Ajaj）
source
3
与答案添加一些解释如何回答帮助OP在固定电流问题
— ρяσѕρєяķ
1

很简单：

<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>
— 彼得·莫滕森
source
1

试试这个：

<!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>
— 穆罕默德·易卜拉欣
source
1 
    <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>
— 拉克希米
source
3
欢迎来到SO！您能再说明一点吗？您的答案仅是代码，因此它可能起作用，但是发问者（或其他访客！）可能不明白它为什么起作用。
— Chilion 2015年
1

如果我们有两个输入字段，则从输入字段获取值，然后使用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);
});
— 阿萨德·阿里（Asad Ali）
source
0

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

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;
  }
— 内存
source
除了正则表达式，您还可以使用parseXX并检查NaN返回。
— 感谢
验证用户输入的数据始终是一个好计划，但是在进行数字加法之前，仍然需要将输入字符串转换为数字形式。
— nnnnnn
0

使用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>
— 普纳·饶
source
0

您也可以这样写：var 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>
— PA010
source
0

通过解析函数中的变量，代码就在这里。

<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">
    <br>Enter second number:
    <input type="text" id="txt2" name="text2">
    <p id="demo"></p>
    <script>
      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;
      }
    </script>
  </body>
</html>

回答

在此处输入图片说明

— 马诺伊·克里希纳（Manoj Krishna）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.