Basic JavaScript function returns concatenation and not arithmetic sum

Question

I am new so thank you for your patience. I did search a lot for the answer but couldn't find, maybe because it's too obvious.

In this case the inputs x and y are taken from <input type="number"..

This function executes upon button click.

Can you tell me why it returns a concatenation, e.g. 33 instead of 6, 45 instead of 9.

  function sum(x,y) {
       x = document.getElementById("x").value;
       y = document.getElementById("y").value;
       var answer = x+y;

       document.getElementById("sum").innerHTML = answer;

  }

Many thanks in advance.

Because the values you're getting are strings and you need to cast them to numbers. There has to be a million dupes of this question on SO alone. Looking for one now... — j08691, Jun 21 '17 at 14:40
.value always returns a string. So tell JS to interpret it as number by e.g. using ....value * 1 or parseInt, or parseFloat, or... — newBee, Jun 21 '17 at 14:41

score 3 · Answer 1 · answered Jun 21 '17 at 14:40

3

You need to convert it into number.

function sum(x,y) {
   x = document.getElementById("x").value;
   y = document.getElementById("y").value;
   var answer = Number(x)+Number(y);

   document.getElementById("sum").innerHTML = answer;

}

answered Jun 21 '17 at 14:40

The_Outsider

1,875
2
24
42

score 1 · Answer 2 · answered Jun 21 '17 at 14:40

1

Because when you put a string on either side of the + operator, it performs concatenation.

"3" + "3" // "33"

The value property of an input will always give you a string.

Convert the strings to numbers if you want to add them together.

answered Jun 21 '17 at 14:40

Quentin

914,110
126
1,211
1,335

The value property of an input will always give you a string. - odd when input type is "number", innit. Thank you, that explains the issue! – Hex25 Jun 21 '17 at 15:18

score 1 · Answer 3 · answered Jun 21 '17 at 14:41

1

This happens beacuse xand y are Strings, to proper operate with them use Number(x) + Number(y) or parseFloat(x) + parseFloat(y)

answered Jun 21 '17 at 14:41

dloeda

1,516
15
23

score 0 · Answer 4 · answered Jun 21 '17 at 14:41

You want to use the parseInt function to actually convert the strings to ints and then add them like this

function sum(x,y) {
   x = parseInt(document.getElementById("x").value);
   y = parseInt(document.getElementById("y").value);
   var answer = x+y;

   document.getElementById("sum").innerHTML = answer;

}

Basic JavaScript function returns concatenation and not arithmetic sum

4 Answers4