Note: If I'm posting here, this is my last resort. I've been working with this book problem for two days, to no avail. It's not a great book but I'm stubborn.
The code and html to follow is for a principal / interest calculator. The problem to solve: after the calculation is executed clicking the "calculate" button to have the rate form field show as "disabled" so no other entries can be made on that particular field. (Now, the book doesn't really give any clear example of this, and I'm just on the second chapter.)
The function is called "calculate_click". The best I've been able to come up with is to add the following else statement at the end of it : $("rate").value = disabled.
This doesn't work, and this might not be the statement to add. Be advised "$" is a shortcut function for "getElementbyId". You'll see this declaration at the very beginning of the code.
Any help would be appreciated. And, by the way, except for this statement the program doesn't show any errors using FF error console, but I may not be using it correctly.
Thanks in advance.
THE SCRIPT
var $ = function (id) {
return document.getElementById(id);
}
var calculate_click = function () {
var investment = parseFloat( $("investment").value );
var annualRate = parseFloat( $("rate").value );
var years = parseInt( $("years").value );
$("futureValue").value = "";
if (isNaN(investment) || investment <= 0) {
alert("Investment must be a valid number\nandgreater than zero.");
} else if(isNaN(annualRate) || annualRate <= 0 || annualRate >=20) {
alert("Annual rate must be a valid number greater than zero and less than 20.");
} else if(isNaN(years) || years >= 50) {
alert("Years must be a valid number\nless than 50.");
} else {
var monthlyRate = annualRate / 12 / 100;
var months = years * 12;
var futureValue = 0;
for ( i = 1; i <= months; i++ ) {
futureValue = ( futureValue + investment ) *
(1 + monthlyRate);
}
$("futureValue").value = futureValue.toFixed(2);
} else {
$(“rate”).value = disabled;
}
var clear_click = function () {
$("investment").value = "";
$("rate").value = "";
$("years").value = "";
$("futureValue").value = "";
}
}
window.onload = function () {
$("calculate").onclick = calculate_click;
$("clear").onclick = clear_click;
$("investment").focus();
}
THE HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Future Value Calculator</title>
<link rel="stylesheet" type="text/css" href="future_value.css" />
<script type="text/javascript" src="future_value.js"></script>
</head>
<body>
<div id="content">
<h1>Future Value Calculator</h1>
<p>Enter the values below and click "Calculate".</p>
<label for="investment">One Time Investment:</label>
<input type="text" id="investment" /><br />
<label for="rate">Annual Interest Rate:</label>
<input type="text" id="rate" />%<br />
<label for="years">Number of Years:</label>
<input type="text" id="years" /><br />
<label for="futureValue">Future Value:</label>
<input type="text" id="futureValue" disabled="disabled" /><br />
<label> </label>
The code and html to follow is for a principal / interest calculator. The problem to solve: after the calculation is executed clicking the "calculate" button to have the rate form field show as "disabled" so no other entries can be made on that particular field. (Now, the book doesn't really give any clear example of this, and I'm just on the second chapter.)
The function is called "calculate_click". The best I've been able to come up with is to add the following else statement at the end of it : $("rate").value = disabled.
This doesn't work, and this might not be the statement to add. Be advised "$" is a shortcut function for "getElementbyId". You'll see this declaration at the very beginning of the code.
Any help would be appreciated. And, by the way, except for this statement the program doesn't show any errors using FF error console, but I may not be using it correctly.
Thanks in advance.
THE SCRIPT
var $ = function (id) {
return document.getElementById(id);
}
var calculate_click = function () {
var investment = parseFloat( $("investment").value );
var annualRate = parseFloat( $("rate").value );
var years = parseInt( $("years").value );
$("futureValue").value = "";
if (isNaN(investment) || investment <= 0) {
alert("Investment must be a valid number\nandgreater than zero.");
} else if(isNaN(annualRate) || annualRate <= 0 || annualRate >=20) {
alert("Annual rate must be a valid number greater than zero and less than 20.");
} else if(isNaN(years) || years >= 50) {
alert("Years must be a valid number\nless than 50.");
} else {
var monthlyRate = annualRate / 12 / 100;
var months = years * 12;
var futureValue = 0;
for ( i = 1; i <= months; i++ ) {
futureValue = ( futureValue + investment ) *
(1 + monthlyRate);
}
$("futureValue").value = futureValue.toFixed(2);
} else {
$(“rate”).value = disabled;
}
var clear_click = function () {
$("investment").value = "";
$("rate").value = "";
$("years").value = "";
$("futureValue").value = "";
}
}
window.onload = function () {
$("calculate").onclick = calculate_click;
$("clear").onclick = clear_click;
$("investment").focus();
}
THE HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Future Value Calculator</title>
<link rel="stylesheet" type="text/css" href="future_value.css" />
<script type="text/javascript" src="future_value.js"></script>
</head>
<body>
<div id="content">
<h1>Future Value Calculator</h1>
<p>Enter the values below and click "Calculate".</p>
<label for="investment">One Time Investment:</label>
<input type="text" id="investment" /><br />
<label for="rate">Annual Interest Rate:</label>
<input type="text" id="rate" />%<br />
<label for="years">Number of Years:</label>
<input type="text" id="years" /><br />
<label for="futureValue">Future Value:</label>
<input type="text" id="futureValue" disabled="disabled" /><br />
<label> </label>
