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
on each number, then sum them up.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..val()
returns what the user typed which is astring
. When you add strings, you get another string. And if you add "13" + "26", you get "1326", not 39.