Adding two numbers concatenates them instead of ca-第3页回答

I am adding two numbers, I get a correct value.

Got the value after sum

function myFunction() {
  var y = document.getElementById("txt1").value;
  var z = document.getElementById("txt2").value;
  var x = Number(y) + Number(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

20条回答

梦寄多情

2楼-- · 2018-12-31 06:35

Hey Friends Its Very Simple

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

0人赞添加讨论(0) 举报

只靠听说

3楼-- · 2018-12-31 06:36

This is an old question, but the following may be useful in general terms.

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.

Your problem occurs because the data coming from the form is regarded as a string, and the + will therefore concatenate rather than add.

When reading supposedly numeric data from a form, you should always push it through parseInt() or parseFloat(), depending on whether you want an integer or a decimal.

Note that neither function truly converts a string to a number. Instead, it will parse the string from left to right until it gets to an invalid numeric character or to the end and convert what has been accepted. In the case of parseFloat, that includes one decimal point, but not two.

Anything after the valid number is simply ignored. Where they fail is if the string doesn’t even start off as a number. Then you will get NaN.

A good general purpose technique for numbers from forms is something like this:

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

If you’re prepared to coalesce an invalid string to 0, you can use:

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

0人赞添加讨论(0) 举报

步步皆殇っ

4楼-- · 2018-12-31 06:37

This won't sum up the number, instead it will concatenate it:

var x = y + z;

What you need to do is:

var x = (y)+(z);

You must use parseInt in order to specify the operation on numbers. Ex:

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

0人赞添加讨论(0) 举报

笑指拈花

5楼-- · 2018-12-31 06:37

An alternative solution, just sharing :) :

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

0人赞添加讨论(0) 举报

高级女魔头

6楼-- · 2018-12-31 06:38

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

0人赞添加讨论(0) 举报

倾城一夜雪

7楼-- · 2018-12-31 06:38

You can also write : var z = x - -y ; And you get correct answer.

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

0人赞添加讨论(0) 举报

Adding two numbers concatenates them instead of ca

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间