Javascript of concatenate number instead of adding, but typeof is a number not a string

Question

I am new to javaScript. I create a calculator here

I saved the input values ​​in variables so that I could eventually manipulate the results to perform input-based calculations. For now, I just want all values ​​to be added together.

However, instead of adding, they are concatenated. I used parseInt so that javascript does not look at numbers as strings, and typeOf shows 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 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> 

Answer 1

Change the line and apply parseInt to each object, following

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

Answer 2

Instead of using parseInt you can multiply the number by 1 . Its a much faster and easier way to hidden data type.

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

Answer 3

Remove the 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 }); }); 

Answer 4

You concatenate strings with + , and then convert this concatenated result to int.

You want to convert to an integer before adding. Something like:

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

Answer 5

you need to use parseInt function for java script.

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

demo