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

例如,执行1 + 2返回12而不是3

我在这段代码中做错了什么?

函数myFunction() { var y = document.getElementById("txt1").value; var z = document.getElementById("txt2").value; Var x = y + z; . getelementbyid(“演示”)。innerHTML = x; } < p > 点击按钮计算x。 <按钮onclick = " myFunction ()”> > < /按钮试试 < / p > < p > 输入第一个数字: <input type="text" id="txt1" name="text1" value="1"> 输入第二个数字: <input type="text" id="txt2" name="text2" value="2"> < / p > < p id = "演示" > < / p >


当前回答

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

First, HTML form fields are limited to text. That applies especially to text boxes, even if you have taken pains to ensure that the value looks like a number. Second, JavaScript, for better or worse, has overloaded the + operator with two meanings: it adds numbers, and it concatenates strings. It has a preference for concatenation, so even an expression like 3+'4' will be treated as concatenation. Third, JavaScript will attempt to change types dynamically if it can, and if it needs to. For example '2'*'3' will change both types to numbers, since you can’t multiply strings. If one of them is incompatible, you will get 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;

其他回答

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

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

我只是使用Number():

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

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

这很简单:

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

或者你可以简单地初始化

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

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