Adding two variables in Javascript

Question

I want to take a number input (id="number") and save it as "x". Then make another variable, "y", that is 5% of "x". And then I want to add them together and save the result in a variable called "result". Let's say that x = 100. Then y = 5. If I would just alert "y" it would alert the number 5 which is correct but the problem is that when I try to alert "result" (x+y) it alerts 1005 (it doesn't add the numbers just write them next to each other).

let x = document.getElementById("number");
let y = x*0.05;
var result = x+y;
alert(result);

document.getElementById("number"); will give you an element, you need to get its value using `.value` if its and input or user `.textContent` if it has text within it - also you need to cast the string to an int once you have retrieved the input — Nick Parsons, Feb 28 '19 at 03:50
That sounds like it's doing a string concatenation, not an addition. I'll search how to fix. — , Feb 28 '19 at 04:02

Ehsan · Answer 1 · 2019-02-28T04:39:17.223

Fist get value and so convert it to number:

Change :

var x = document.getElementById("number")

to :

var x = parseInt( document.getElementById("number").value )

Note : You must convert the input to a number even if type property be equal with number.

function fun() {
  var x = document.getElementById('number').value;
  console.log( typeof x)
  var y = parseInt(document.getElementById('number').value);
  console.log( typeof y)
}

<input type="number" id="number">
<button onclick="fun()">Go..</button>

score 1 · Answer 2 · answered Feb 28 '19 at 04:28

you need a value for doing some calculation. so,

var x = document.getElementById("number").value;
"+" operator will concatenate if string value exist. var x is string value but automatic type casting will occur when var y=x*0.05. so you must cleary declaire "x is number" via parseInt().

var x = parseInt(document.getElementById("number").value);

Now "+" operator will work as you expected.

score 1 · Answer 3 · 2019-03-17T05:11:07.493

What's going on is x+y is performing string concatenation, not integer addition--which is what you want.

// String concatenation
console.log("100" + "5"); // outputs "1005"

// Integer Addition
console.log(100 + 5); // outputs "105"

That's the problem, but what's the solution?

The solution is to force integer addition with something like parseInt() (as Ehsan mentioned)

var x = parseInt( document.getElementById("number").value );

Worth noting is the fact that Ehsan uses document.getElementById("number").value, instead of document.getElementById("number")

This forces x to be an int, which will allow x+y to perform integer addition.

P.S. I should also note part of the reason for your problem is related to the fact that document.getElementById("number").value is a string, forcing a type conversion to take place

Addition ‘+’ concatenates strings Almost all mathematical operations convert values to numbers. A notable exception is addition +. If one of the added values is a string, the other one is also converted to a string.

Then, it concatenates (joins) them:
alert( 1 + '2' ); // '12' (string to the right)
alert( '1' + 2 ); // '12' (string to the left)
This only happens when at least one of the arguments is a string. Otherwise, values are converted to numbers.

Meaning that one of the operands (again, document.getElementById("number").value is a string) in an addition operation being a string forces both to become strings and get concatenated.

Adding two variables in Javascript

3 Answers3