I’m reading Javascript – The Definitive Guide. I usually try to imitate the examples they give so I can learn it more quickly, that’s just how I learn. But I rewrote this Javascript and it doesn’t seem to be working. Whenever I input the numbers and hit calculate it doesn’t calculate.
I’ve already tried looking for an answer elsewhere, but found nothing.
<html>
<body>
<head><title>Factorials</title></head>
<form name="loandata">
<table>
<tr>
<td colspan="3"><b>Enter Loan Information:</b></td>
</tr>
<tr>
<td>1)</td>
<td>Amount of the loan (any currency):</td>
<td><input type="text" name="principal" size="12"
onchange="calculate();" /></td>
</tr>
<tr>
<td>2)</td>
<td>Annual percentage rate of interest:</td>
<td><input type="text" name="interest" size="12"
onchange="calculate();" /></td>
</tr>
<tr>
<td>3)</td>
<td>Repayment period in years:</td>
<td><input type="text" name="years" size="12"
onchange="calculate();" /></td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="Compute" onclick="calculate();" />
</td>
</tr>
<tr>
<td colspan="3">
<b>Payment Information:</b>
</td>
</tr>
<tr>
<td>4)</td>
<td>Your monthly payment will be:</td>
<td><input type="text" name="payment" size="12" /></td>
</tr>
<tr>
<td>5)</td>
<td>Your total payment will be:</td>
<td><input type="text" name="total" size="12" /></td>
</tr>
<tr>
<td>6)</td>
<td>Your total interest payments will be:</td>
<td><input type="text" name="totalinterest" size="12" /></td>
</tr>
</table>
</form>
<script>
function calculate() {
// Get the user's input from the form. Assume it is all valid.
// Convert interest from a percentage to a decimal, and convert form
// an annual rate to a monthly rate. Convert payment period in years
// to the number of monthly payments.
var principal = document.loandata.principal.value;
var interest = document.loandata.interest.value / 100 / 12;
var payments = document.loandata.years.value * 12;
// Now compute the monthly payment figure, using esoteric math..
var x = Math.pow(1 + interest, payments);
var monthly = (principal*x*interest)/(x-1);
// Check that the result is a finite number. If so, display the results.
if (!isNaN(monthly) &&
(monthly != Number.POSITIVE_INFINITY) &&
(monthly != Number.NEGATIVE_INFINITY) {
document.loandata.payment.value = round(monthly);
document.loandata.total.value = round(monthly * payments);
document.loandata.totalinterest.value = round((monthly * payments) - principal);
}
// Otherwise, the user's input was probably invalid, so don't display anything.
else {
document.loandata.payment.value = "";
document.loandata.total.value = "";
document.loandata.totalinterest.value = "";
}
}
// This simple method rounds a number to two decimal places.
function round(x) {
return Math.round(x*100)/100;
}
</script>
</body>
</html>
First thing I notice is that you are missing a bracket:
if (!isNaN(monthly) &&(monthly != Number.POSITIVE_INFINITY) &&
(monthly != Number.NEGATIVE_INFINITY) *)* {
I’ve found that JSLint helps me alot with these sort of syntax errors. If you are using an IDE there are some integration tools you can use to get JSLint to work with them.
Jared also makes an excellent point indirectly about another website, JSFiddle, which can be used to debug HTML+CSS+JS.