234

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

例如,doing1 + 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>

4

24 回答 24

413

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

var x = +y + +z;
于 2013-01-24T08:08:52.470 回答
157

我只是使用Number()

var i=2;  
var j=3;  
var k = Number(i) + Number(j); // 5  
于 2013-12-10T14:02:10.183 回答
31

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

于 2013-01-24T08:09:07.500 回答
23

使用parseInt(...)但确保指定基数值;否则你会遇到几个错误(如果字符串以“0”开头,基数是八进制/8等)。

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

alert(x + y);

希望这可以帮助!

于 2013-01-24T08:12:53.667 回答
14

以下内容一般来说可能是有用的。

  • 首先,HTML 表单字段仅限于text。这尤其适用于文本框,即使您已尽力确保该值看起来像一个数字。

  • 其次,无论好坏,JavaScript 都+以两种含义重载了运算符:添加数字和连接字符串。它偏好连接,因此即使是 like 的表达式3+'4'也会被视为连接。

  • 第三,如果可以并且需要的话,JavaScript 会尝试动态地改变类型。例如'2'*'3',将两种类型都更改为数字,因为您不能将字符串相乘。如果其中一个不兼容,您将得到NaN, Not a Number。

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

从表单中读取所谓的数字数据时,您应该始终将其推入parseInt()parseFloat(),具体取决于您想要整数还是小数。

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

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

从表单中获取数字的一个很好的通用技术是这样的:

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

如果您准备将无效字符串合并为 0,则可以使用:

var data=parseInt(form.elements['data'].value) || 0;
于 2018-04-10T11:55:55.000 回答
8

只需添加一个简单的类型转换方法,因为输入是文本格式的。使用以下内容:

    var y = parseInt(document.getElementById("txt1").value);
    var z = parseInt(document.getElementById("txt2").value);
    var x = y + z;
于 2013-09-27T20:41:32.760 回答
7

这不会总结数字;相反,它将连接它:

var x = y + z;

你需要做:

var x = (y)+(z);

您必须使用 parseInt 来指定对数字的操作。例子:

var x = parseInt(y) + parseInt(z); [final soulution, as everything us]
于 2016-08-18T10:49:35.870 回答
6

简单的

var result = parseInt("1") + parseInt("2");
console.log(result ); // Outputs 3
于 2015-01-15T09:07:23.867 回答
4

这段代码总结了这两个变量!把它放到你的函数中

var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = (y +z);
document.getElementById("demo").innerHTML = x;`
于 2016-01-10T07:22:54.170 回答
3

或者你可以简单地初始化

变量 x = 0; (你应该使用 let x = 0;)

这样它将添加不连接。

于 2020-09-01T19:26:48.960 回答
2

这很简单:

<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>
于 2013-12-02T08:19:37.013 回答
2

试试这个:

<!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>
于 2014-06-13T11:28:28.107 回答
2

您在添加步骤中缺少类型转换......
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>
于 2015-02-28T19:53:44.853 回答
2
    <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>
于 2015-12-11T09:06:37.430 回答
2

如果我们有两个输入字段,则从输入字段中获取值,然后使用 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);
});
于 2016-07-26T08:26:08.383 回答
2
  <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>
于 2017-05-30T05:19:52.443 回答
2

这也可以通过使用output元素的更原生的 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/

output元素可以用作计算或输出用户动作的容器元素。您还可以将 HTML 类型从 更改numberrange并使用不同的 UI 元素保持相同的代码和功能,如下所示。

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

于 2020-09-29T03:29:59.860 回答
1

您可以使用正则表达式进行预检查,无论它们是否是数字

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;
  }
于 2013-01-24T08:24:15.310 回答
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">
    <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>

回答

在此处输入图像描述

于 2016-11-30T20:51:03.030 回答
1

使用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>
于 2017-05-10T12:30:33.273 回答
1

你也可以写: 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>
于 2018-01-26T09:31:48.373 回答
1

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

 var1 - (- var2)
于 2020-09-08T09:59:23.987 回答
0

也许你可以使用这个函数来添加数字:

function calculate(a, b) {
  return a + b
}
console.log(calculate(5, 6))
于 2021-02-25T13:09:05.090 回答
-2

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

var result=eval(num1)+eval(num2);
于 2014-05-28T07:32:39.190 回答