Javascript unexpected result for adding two input box values

Question

I was trying to add two text box fields values in Java script. Below is my code

<!DOCTYPE html>
<html>
<head>
<script>
function addFunction() {
    var x = document.getElementById("firstInput").value;
    var y = document.getElementById("secondInput").value;
    var sum=x+y;
    alert('Sum is:'+sum);
}
</script>
</head>
<body>

<input type="text" id="firstInput"><br/>
<input type="text" id="secondInput"><br/>

<input type="button" value="Add" onclick="addFunction()">

</body>
</html>

I was expecting the result will be sum of two field values but it is not I entered 2 in first text field and 3 in second text field out put is

Sum is:23

Then only for testing I have added below code in addFunction()

var a = 0.0343;
var b = 0.11;
var x = a + b;
alert(x);

output is

0.144299999999999998

What's going on. Can someone explain me why I am getting these two peculiar output?

possible duplicate of [Is floating point math broken?](http://stackoverflow.com/questions/588004/is-floating-point-math-broken) — Amit, Aug 04 '15 at 17:56
my bad. It is not related to this question. sorry. I removed it from code now. — Rahul, Aug 04 '15 at 17:57
you can use `x.toFixed(2)` 2 is quantity of decimals you want — miglio, Aug 04 '15 at 17:59

score 1 · Answer 1 · edited May 23 '17 at 12:06

The value of input elements are strings. "2" + "3" == "23"

To get your expected output you can do this:

function addFunction() {
    var x = parseInt(document.getElementById("firstInput").value);
    var y = parseInt(document.getElementById("secondInput").value);
    var sum=x+y;
    alert('Sum is:'+sum);
}

Regarding the second question, you can read more here: How to deal with floating point number precision in JavaScript?

score 0 · Answer 2 · answered Aug 04 '15 at 17:55

0

The values that come back from the input fields are strings. When you add two strings, they append. So "2" + "3" is the string "23".

You can convert the strings to integers using parseInt. As in:

var sum = parseInt(x) + parseInt(y);

answered Aug 04 '15 at 17:55

Ghazgkull

970
1
6
17

@Rahul Can you please accept my answer if it solved your problem? I did reply first and I could use the rep. – Ghazgkull Aug 04 '15 at 19:48

Bhavin Solanki · Answer 3 · 2015-08-04T17:59:15.357

You have to use parseInt() to get exact output

<!DOCTYPE html>
<html>
<head>
<script>
function addFunction() {
    var x = parseInt(document.getElementById("firstInput").value);
    var y = parseInt(document.getElementById("secondInput").value);
    var sum=x+y;
    alert('Sum is:'+sum);
}
</script>
</head>
<body>

<input type="text" id="firstInput"><br/>
<input type="text" id="secondInput" onchange="myFunction()"><br/>

<input type="button" value="Add" onclick="addFunction()">

</body>
</html>

score 0 · Answer 4 · answered Aug 04 '15 at 17:57

This is happening because its taking your input values as characters instead of actual numbers. When you set variables a and b in your second example you're setting them to number values. If you want numbert values change your add function to

function addFunction() {
    var x = parseInt(document.getElementById("firstInput").value);
    var y = parseInt(document.getElementById("secondInput").value);
    var sum=x+y;
    alert('Sum is:'+sum);
}

There you convert all text values to int then add in the function

Ayrit · Answer 5 · 2015-08-04T18:18:32.620

Typecasting

Inputs and textareas contain string values. This is why your sum mashes the values side by side. That's how string concatenation works.

'foo' + 'bar' //foobar
'1' + '2' //12
1 + 2 //3

You need to typecast them to number in order for it to work. You can use Number or parseInt to do this. Number only finds the numeric values and runs much faster. parseInt is slower but it can remove character values and convert hexadecimal.

Number('1') + Number('2') //3

Handing Floats

For your Trailing number issue.

 0.0343 + 0.11 //0.144299999999999998

This occurs because floating numbers are sorted using fractions. Fractions like 2/3rds don't convert well back into their decimal form. You can read the long explanation here. Anyways, use toFixed to format this correctly.

Math.PI //3.141592653589793
Math.PI.toFixed(2) //3.14

Javascript unexpected result for adding two input box values

5 Answers5