Javascript numbers concatenate instead of adding but typeof is number not string

Question

I am new to javaScript. I am building a calculator here

I have stored the input values in variables so that I can eventually manipulate the results to perform calculations based on input. For now I just want all of the values to add together.

However, rather than adding, they are concatenating. I used parseInt to prevent javascript from viewing the numbers as strings, and typeOf reveals that they are numbers.

Here is my javascript:

$(document).ready(function() {

var theTerm = $("#theTerm").val();
var theRate = $("#theRate").val();
var thePrice = $("#thePrice").val();
var theTax = $("#theTax").val();
var theDown = $("#theDown").val();
var theTrade = $("#theTrade").val();
var theResult = parseInt(theTerm + theRate + thePrice + theTax + theDown + theTrade, 10);

$("#calculate").click(function(){
    alert(theResult);
    alert(typeof(theResult));
});

});

and the HTML:

<div id="calculator">
<span id="calculatorHeader">Monthly Payment Calculator</span>
<table style="margin:0 auto;">
    <tr>
    <td style="width:40px;">Term
        <input id="theTerm" size="5" value="7" name="term" style="width:35px" />
    </td>
    <td style="width:40px;">Rate(%)
        <input id="theRate" size="5" value="7" name="apr" style="width:35px" />
    </td>
    <td style="width:55px;">Price($)
        <input id="thePrice" size="6" maxlength="7" name="price" style="width:50px" value="7" />
    </td>
    <td style="width:40px;">Tax(%)
        <input id="theTax" size="4" maxlength="7" name="tax" style="width:35px" value="7" />
    </td>
    <td style="width:40px;">Down($)
        <input id="theDown" size="5" maxlength="7" name="downPmt" style="width:35px" value="7" />
    </td>
    <td style="width:40px;">Trade($)
        <input id="theTrade" size="5" maxlength="7" name="trade" style="width:35px" value="7" />
    </td>
    <td style="width:78px;">Est.Monthly Pmt
        <input id="theResult" size="7" maxlength="7" name="result" style="width:75px" value="0" />
    </td>
    </tr>
</table>
<button type="button" id="calculate">Add Boxes!</button>
</div>

parseInt is not an environment that causes everything to be treated as numbers inside it. It is a function that takes a string and returns an integer. You have several strings; go get several integers. — Ry-
– Ry- ♦, Commented Mar 15, 2014 at 3:41
What you're missing is that .val() returns what the user typed which is a string. When you add strings, you get another string. And if you add "13" + "26", you get "1326", not 39. — jfriend00
– jfriend00, Commented Mar 15, 2014 at 3:54
@jfriend00 I figured that out by using typeOf, googled what to do and then used code in my original post (with parseInt). What was strange is that typeOf then returned "number" yet still concatenated result as if it were a string! — HelloWorld
– HelloWorld, Commented Mar 15, 2014 at 4:24
You added strings and THEN converted to a number. You have to convert to a number BEFORE you add. — jfriend00
– jfriend00, Commented Mar 15, 2014 at 4:30

joker · Accepted Answer · 2014-03-15 03:45:06Z

21

Change line and apply parseInt to each obj as follow

var theResult = parseInt(theTerm) + parseInt(theRate) + parseInt(thePrice) + parseInt(theTax) + parseInt(theDown) + parseInt(theTrade);

answered Mar 15, 2014 at 3:45

joker

9909 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

HelloWorld Over a year ago

This does work, but I don't want to use parseInt every time I need the variable. Is this the only way to do?

joker Over a year ago

yupp it necessary to convert string in to integer value and you may also try the @mohit pandey's answer to convert string into int.

Gaurang Tandon Over a year ago

@HelloWorld You don't need to use it each time and repeat yourself, see my answer.

Zorgatone Over a year ago

You really should use 10 as the second parameter of the parseInt function

Sebastian Simon Over a year ago

Nowadays you can just use var theResult = [theTerm, theRate, thePrice, theTax, theDown, theTrade].reduce((a, b) => a + Number(b), 0);.

Mohit Pandey · Accepted Answer · 2014-03-15 03:55:09Z

6

Instead of using parseInt, you can multiply number by 1. Its much faster and easier method to covert datatype.

$(document).ready(function () {
    var theTerm = $("#theTerm").val() * 1;
    var theRate = $("#theRate").val() * 1;
    var thePrice = $("#thePrice").val() * 1;
    var theTax = $("#theTax").val() * 1;
    var theDown = $("#theDown").val() * 1;
    var theTrade = $("#theTrade").val() * 1;
    var theResult = theTerm + theRate + thePrice + theTax + theDown + theTrade;

    $("#calculate").click(function () {
        alert(theResult);
        alert(typeof (theResult));
    });
});

JSFiddle: http://jsfiddle.net/RqzPk/14/

answered Mar 15, 2014 at 3:55

Mohit Pandey

3,8597 gold badges28 silver badges38 bronze badges

2 Comments

jfriend00 Over a year ago

If you're going for fast and compact, then just put a + in from of them: var theTerm = +$("#theTerm").val(). Personally, I don't think these "trick" conversions are as readable as an explicit numeric conversion (easy to miss the developer's intent).

HelloWorld Over a year ago

@jfriend00 these both work too. I can see where each of these methods would be useful depending on the situation.

Gaurang Tandon · Accepted Answer · 2014-03-15 03:54:32Z

3

Tidy up your code a bit and avoid repetition:

DEMO

$(document).ready(function() {
    $("#calculate").click(function(){   
        var inputs = $("input"), theResult = 0;  // `inputs` is the list of all input elements

        for(var i = 0;i < inputs.length; i++)  // iterate over all inputs
            // parse their value, in base 10, and add to the theResult
            theResult += parseInt(inputs[i].value, 10); 

        alert(theResult); // 42
    });
});

answered Mar 15, 2014 at 3:54

Gaurang Tandon

6,90911 gold badges52 silver badges96 bronze badges

4 Comments

HelloWorld Over a year ago

In order to do simple addition, this is optimal. However, as I stated in the question, this will be a calculator that will perform functions other than simply adding the numbers in the fields. I am not sure your solution would work when I want to multiply or add a percentage to the total.

Gaurang Tandon Over a year ago

@HelloWorld Ok, I see that you won't perform just addition. Apologies then.

Gaurang Tandon Over a year ago

@HelloWorld P.S. you might be interested in parseFloat, because if the user will enter decimal value, like 2.2, then it will become 2 if you use parseInt

HelloWorld Over a year ago

OK got it! parseInt converts datatypes to whole numbers. parseFloat converts datatypes to floating point numbers.

NaYaN · Accepted Answer · 2014-03-15 03:47:19Z

1

you have to use parseInt function of java script.

for ex: var theTerm = parseInt($("#theTerm").val());

demo

answered Mar 15, 2014 at 3:47

NaYaN

1,3207 silver badges11 bronze badges

1 Comment

HelloWorld Over a year ago

I did use parseInt. You do need to add the base # parameter don't you?

mgilson · Accepted Answer · 2014-03-15 03:49:18Z

1

You're concatenating the strings with + and then you're converting that concatenated result to an int.

You want to convert to an integer before you add. Something like:

var theTerm = parseInt($("#theTerm").val(), 10);
...
var theResult = theTerm + theRate + thePrice + theTax + theDown + theTrade;

edited Mar 15, 2014 at 3:49

answered Mar 15, 2014 at 3:44

mgilson

312k70 gold badges656 silver badges722 bronze badges

2 Comments

BrightIntelDusk Over a year ago

Just to expound upon your answer... The second parameter in ParseInt is asking for a base of the number. So base 10 would be a number that is made up of 0-9. Base 16 would be hexidecimal where the number would be represented by 0-F.

HelloWorld Over a year ago

OK! now I wont have to use parseInt every time I need the variable as I build.

Collectives™ on Stack Overflow

Javascript numbers concatenate instead of adding but typeof is number not string

5 Answers 5

5 Comments

2 Comments

DEMO

4 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

2 Comments

4 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related