Adding two numbers concatenates them instead of calculating the sum

Question

I am adding two numbers, but I don't get a correct value.

For example, doing 1 + 2 returns 12 and not 3

What am I doing wrong in this code?

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>

What type of values are you expecting as input? Integers or decimals? — Zorayr, Commented Jan 24, 2013 at 8:20
A text input value will be string and strings will always concatenate instead of addition — hank, Commented Jan 24, 2013 at 8:27
Possible duplicate of How to add two strings as if they were numbers? — Organic Advocate, Commented Jul 11, 2017 at 18:59
If you have an <input type="number">, you can simply get its .valueAsNumber property directly. — Sebastian Simon, Commented Aug 30, 2018 at 16:30

Peter Mortensen · Accepted Answer · 2019-08-20 18:38:13Z

446

They are actually strings, not numbers. The easiest way to produce a number from a string is to prepend it with +:

var x = +y + +z;

edited Aug 20, 2019 at 18:38

Peter Mortensen

31.4k22 gold badges109 silver badges132 bronze badges

answered Jan 24, 2013 at 8:08

elclanrs

93.8k21 gold badges136 silver badges171 bronze badges

7

out of curiousity (myself not a JavaScript programmer) (and I think this would improve the answer), what does the +-prefix do with strings?
– Sebastian Mach
Commented Jan 24, 2013 at 8:10
40

The above code is a bit bizarre and will confuse less seasoned developers. The code will also fail JSLint for confusing use of '+'.
– Zorayr
Commented Jan 24, 2013 at 8:23
3

@phresnel: unary + operators
– akTed
Commented Jan 24, 2013 at 8:28
16

@AKTed: Actually I wanted to provoke elclanrs to describe it a bit within his answer. Of course I am not unable to do the google search myself; but it would (imo) improve the quality of the answer, especially because using prefix-+ for string conversion is pretty uncommon in other programming languages and might confuse newbies. (however, thanks for sharing the link)
– Sebastian Mach
Commented Jan 24, 2013 at 8:37
5

I would discourage anyone from using this shortcut. I know that actually parsing a string into a number requires more code but at least the code clearly matches the intention.
– Si Kelly
Commented May 10, 2017 at 12:33

| Show 8 more comments

Salman Arshad · Accepted Answer · 2023-12-15 08:19:19Z

168

I just use Number():

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

edited Dec 15, 2023 at 8:19

Salman Arshad

270k83 gold badges436 silver badges528 bronze badges

answered Dec 10, 2013 at 14:02

gerard

1,9431 gold badge12 silver badges14 bronze badges

4

I kept making this mistake which always concats: var k += Number(i)
– John Phelps
Commented May 29, 2019 at 18:43
1

Using the Number method does work to convert strings to numeric values, but i and j are already numeric variables in this example. I'm surprised no one mentioned that in the decade this answer has existed.
– computercarguy
Commented Oct 25, 2023 at 19:29

Add a comment |

L84 · Accepted Answer · 2016-03-02 04:33:52Z

32

You need to use javaScript's parseInt() method to turn the strings back into numbers. Right now they are strings so adding two strings concatenates them, which is why you're getting "12".

edited Mar 2, 2016 at 4:33

L84

46k59 gold badges181 silver badges258 bronze badges

answered Jan 24, 2013 at 8:09

mitim

3,1996 gold badges24 silver badges25 bronze badges

3

I'm not sure parseInt() is the best option here given that the OP's function is adding two user-entered "numbers", not two "integers".
– nnnnnn
Commented Jan 24, 2013 at 8:17
3

@nnnnnn I think, that could easily be amended with parseFloat should the OP provide more input.
– Yoshi
Commented Jan 24, 2013 at 8:25
2

@Yoshi - Yes, yes it could, but given that the answer doesn't actually say anywhere that parseInt() only returns integers, and doesn't explain any of parseInt()'s "quirks" - which could be a problem with user-entered data - I thought it was worth mentioning. (I didn't actually downvote or anything.)
– nnnnnn
Commented Jan 24, 2013 at 8:42
1

Yes, I had made an assumption that the input would be integers since they gave an example of 1 + 2, but you're right - parseFloat() may be better if they are just any 'numbers'.
– mitim
Commented Jan 24, 2013 at 9:23

Add a comment |

Zorayr · Accepted Answer · 2013-01-24 08:12:53Z

24

Use parseInt(...) but make sure you specify a radix value; otherwise you will run into several bugs (if the string begins with "0", the radix is octal/8 etc.).

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

alert(x + y);

Hope this helps!

answered Jan 24, 2013 at 8:12

Zorayr

24.5k8 gold badges141 silver badges135 bronze badges

7

I'm not sure parseInt() is the best option here given that the OP's function is adding two user-entered "numbers", not two "integers".
– nnnnnn
Commented Jan 24, 2013 at 8:16
2

Unless he is expecting floating point values, I think using this approach still works great.
– Zorayr
Commented Jan 24, 2013 at 8:24
3

This is no longer a problem in ES6. The radix may be safely omitted. parseInt("012") works fine, returning 12. Of course, you still have to careful with things like [1,2].map(parseInt).
– user663031
Commented Sep 23, 2016 at 19:07

Add a comment |

Manngo · Accepted Answer · 2021-05-07 23:22:04Z

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. They both fail 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.elements['data'].value); //  or parseFloat

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

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

Peter Mortensen · Accepted Answer · 2019-08-20 18:39:36Z

8

Just add a simple type casting method as the input is taken in text. Use the following:

    var y = parseInt(document.getElementById("txt1").value);
    var z = parseInt(document.getElementById("txt2").value);
    var x = y + z;

edited Aug 20, 2019 at 18:39

Peter Mortensen

31.4k22 gold badges109 silver badges132 bronze badges

answered Sep 27, 2013 at 20:41

Vibhav Shreshth

891 silver badge1 bronze badge

Add a comment |

Peter Mortensen · Accepted Answer · 2019-08-20 18:55:42Z

8

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

var x = y + z;

You need to do:

var x = (y)+(z);

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

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

edited Aug 20, 2019 at 18:55

Peter Mortensen

31.4k22 gold badges109 silver badges132 bronze badges

answered Aug 18, 2016 at 10:49

Pushp Singh

5977 silver badges10 bronze badges

This should be the correct answer for addition and subtraction not the accepted one.
– MR_AMDEV
Commented Apr 20, 2019 at 18:27

Add a comment |

Murtaza Khursheed Hussain · Accepted Answer · 2016-02-18 15:03:40Z

6

Simple

var result = parseInt("1") + parseInt("2");
console.log(result ); // Outputs 3

edited Feb 18, 2016 at 15:03

answered Jan 15, 2015 at 9:07

Murtaza Khursheed Hussain

15.3k7 gold badges60 silver badges83 bronze badges

Add a comment |

tiny sunlight · Accepted Answer · 2016-01-10 07:29:05Z

4

This code sums both the variables! Put it into your function

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

edited Jan 10, 2016 at 7:29

tiny sunlight

6,2513 gold badges22 silver badges42 bronze badges

answered Jan 10, 2016 at 7:22

taha

513 bronze badges

Add a comment |

Peter Mortensen · Accepted Answer · 2019-08-20 18:53:15Z

3

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

edited Aug 20, 2019 at 18:53

Peter Mortensen

31.4k22 gold badges109 silver badges132 bronze badges

answered Dec 11, 2015 at 9:06

Lakshmi

311 bronze badge

4

Welcome to SO! Can you please explain a little bit more? Your answer is only code, so it might work, but the questioner (or other visitors!) might not understand why it works.
– Chilion
Commented Dec 11, 2015 at 9:32

Add a comment |

George Tiganila · Accepted Answer · 2020-09-01 19:26:48Z

3

Or you could simply initialize

var x = 0; ( you should use let x = 0;)

This way it will add not concatenate.

answered Sep 1, 2020 at 19:26

George Tiganila

5791 gold badge6 silver badges18 bronze badges

Add a comment |

Jay Momaya · Accepted Answer · 2020-09-08 09:59:23Z

3

If Nothing works then only try this. This maybe isn't Right way of doing it but it worked for me when all the above failed.

 var1 - (- var2)

answered Sep 8, 2020 at 9:59

Jay Momaya

1,9992 gold badges21 silver badges32 bronze badges

1

Nice and while still tricky, could be more acceptable than +x + +y.
– Wiktor Zychla
Commented Oct 6, 2022 at 10:29

Add a comment |

AbcAeffchen · Accepted Answer · 2015-02-28 20:21:13Z

You are missing the type conversion during the addition step...
var x = y + z; should be 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>

Peter Mortensen · Accepted Answer · 2019-08-20 18:42:18Z

It's 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>
    </body>
</html>

Peter Mortensen · Accepted Answer · 2019-08-20 18:47:23Z

Try this:

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

Peter Mortensen · Accepted Answer · 2019-08-20 18:54:22Z

2

If we have two input fields then get the values from input fields, and then add them using 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);
});

edited Aug 20, 2019 at 18:54

Peter Mortensen

31.4k22 gold badges109 silver badges132 bronze badges

answered Jul 26, 2016 at 8:26

Asad Ali

6657 silver badges10 bronze badges

Add a comment |

Darren · Accepted Answer · 2020-09-29 03:29:59Z

This can also be achieved with a more native HTML solution by using the output element.

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

The output element can serve as a container element for a calculation or output of a user's action. You can also change the HTML type from number to range and keep the same code and functionality with a different UI element, as shown below.

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

Ram · Accepted Answer · 2013-01-24 09:02:44Z

1

You can do a precheck with regular expression wheather they are numbers as like

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

edited Jan 24, 2013 at 9:02

answered Jan 24, 2013 at 8:24

Ram

8531 gold badge13 silver badges27 bronze badges

1

Instead of regular expressions you could just use parseXX and check for NaN return.
– hank
Commented Jan 24, 2013 at 8:30
1

Validating user-entered data is always a good plan, but you still need to convert the input strings to numeric form before you can do a numeric addition.
– nnnnnn
Commented Jan 24, 2013 at 8:36

Add a comment |

Poorna Rao · Accepted Answer · 2017-05-10 12:36:00Z

Use parseFloat it will convert string to number including decimal values.

 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>

Ahmad Ajaj · Accepted Answer · 2017-05-30 05:19:52Z

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

Add some explanation with answer for how this answer help OP in fixing current issue — ρяσѕρєя K, Commented May 30, 2017 at 5:33

Penny Liu · Accepted Answer · 2023-12-15 08:16:34Z

1

Here goes your code by parsing the variables in the function.

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

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

Answer

edited Dec 15, 2023 at 8:16

Penny Liu

16.7k5 gold badges84 silver badges106 bronze badges

answered Nov 30, 2016 at 20:51

Manoj Krishna

3471 gold badge4 silver badges13 bronze badges

Add a comment |

P.A.010 · Accepted Answer · 2018-01-26 09:31:48Z

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>

2 revs, 2 users 75% · Accepted Answer · 2015-08-25 12:08:12Z

-4

An alternative solution, just sharing :) :

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

edited Aug 25, 2015 at 12:08

community wiki

2 revs, 2 users 75%
user3201772

1

Not a nice as using the jQuery arithmetic plugin, but I like it.
– Paul Draper
Commented Mar 26, 2015 at 20:00
In principle, there’s nothing wrong with eval(), but you should never use eval with user data.
– Manngo
Commented Sep 19, 2020 at 1:17
1

@PaulDraper I think using a jQuery plugin for such a simple task is well and truly overkill, especially when JavaScript has a built-in solution.
– Manngo
Commented Sep 19, 2020 at 1:18

Add a comment |

G. Trialonis · Accepted Answer · 2021-02-25 13:09:05Z

-4

Perhaps you could use this function to add numbers:

function calculate(a, b) {
  return a + b
}
console.log(calculate(5, 6))

answered Feb 25, 2021 at 13:09

G. Trialonis

993 silver badges11 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Adding two numbers concatenates them instead of calculating the sum

24 Answers 24

Not the answer you're looking for? Browse other questions tagged
javascript
html
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

24 Answers 24

Not the answer you're looking for? Browse other questions tagged javascripthtml or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
javascript
html
or ask your own question.