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

例如,执行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 >


当前回答

如果什么都没用,那就试试这个。这也许不是正确的方法,但当以上所有方法都失败时,它对我有用。

 var1 - (- var2)

其他回答

这也可以通过使用输出元素来实现更原生的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元素保持相同的代码和功能,如下所示。

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

这很简单:

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

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

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

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

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

回答