wgrayson
Technical User
- Jan 13, 2002
- 3
I'm working through a Beginning Javascript textbook, and cannot get a simple Clear function to work in the code. The question was as follows: "Add an event handler named clear_click that clears the text butoxes when the clear button is clicked. This handler should store empty text strings ont he four text boxes on the page." As always, this is the point of the book where you can't find the answers and you need to figure it out.
Up to this point the text only uses the "getElementbyID" method of creating a function to assign commands. And it also creates a "shortcut" function with the var name "$" (it's the first function in the code). It also shows how to add the event-handler as well. Well, the example in the book shows how to write / store an empty text string to a field. Unfortunately, it doesn't show how to do that for multiple fields. So far, my work only clears the first field, but not the other three. I've been researching on the web, and it's not helping. I am also for the time being trying to stay within the parameters of the lesson --- I'm not trying to use the getElementbyTagName method, for example (and besides, I tried that with disastrous results). I'd like to see if I can get the getELementbyID.value "" way to work if possible.
I've pasted in the HTML and JS codes below. (we don't care about the CSS). The specific function is found on lines 4-6 and line 36 (the event handler, which I think works). Note, the actual HTML file is a basic exercise file. Thanks in advance. I'm just stumped. Do I need to do a for or while loop here?
W!
Javascript code
var $ = function (id) {
return document.getElementById(id); //this is shortcut function for getElementbyId to follow
}
var clear_click = function () {
$("investment").value = "";
$("annualRate").value = "";
$("years").value = "";
$("futureValue").value = "";
//This method only clears the first field
//and doesn't recognize the other three fields.
}
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);
}
}
window.onload = function () {
$("calculate").onclick = calculate_click;
$("clear").onclick = clear_click;
$("investment").focus();
}
HTML Code
<!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">Monthly 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>
<input type="button" id="calculate" value="Calculate" /> <input type="button" id="clear" value="Clear" /><br />
</div>
</body>
</html>
Up to this point the text only uses the "getElementbyID" method of creating a function to assign commands. And it also creates a "shortcut" function with the var name "$" (it's the first function in the code). It also shows how to add the event-handler as well. Well, the example in the book shows how to write / store an empty text string to a field. Unfortunately, it doesn't show how to do that for multiple fields. So far, my work only clears the first field, but not the other three. I've been researching on the web, and it's not helping. I am also for the time being trying to stay within the parameters of the lesson --- I'm not trying to use the getElementbyTagName method, for example (and besides, I tried that with disastrous results). I'd like to see if I can get the getELementbyID.value "" way to work if possible.
I've pasted in the HTML and JS codes below. (we don't care about the CSS). The specific function is found on lines 4-6 and line 36 (the event handler, which I think works). Note, the actual HTML file is a basic exercise file. Thanks in advance. I'm just stumped. Do I need to do a for or while loop here?
W!
Javascript code
var $ = function (id) {
return document.getElementById(id); //this is shortcut function for getElementbyId to follow
}
var clear_click = function () {
$("investment").value = "";
$("annualRate").value = "";
$("years").value = "";
$("futureValue").value = "";
//This method only clears the first field
//and doesn't recognize the other three fields.
}
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);
}
}
window.onload = function () {
$("calculate").onclick = calculate_click;
$("clear").onclick = clear_click;
$("investment").focus();
}
HTML Code
<!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">Monthly 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>
<input type="button" id="calculate" value="Calculate" /> <input type="button" id="clear" value="Clear" /><br />
</div>
</body>
</html>