Form iteration function not working properly
- by Moses
My function is supposed to iterate all forms in the document, and bind an onclick function to each 'calculate' element int he form. The problem is, the function that executes on any of the click events executes in the context of the the last i in the loop.
Here is the JavaScript that I'm using:
window.onload = function(){
calculateSavings();
}
function calculateSavings(){
for (i = 0; i < document.forms.length; i++) {
var e = document.forms[i];
e.calculate.onclick = function() {
var hours = e.hours.value;
var rate = e.rate.value;
alert(hours * rate);
}
}
}
And here is the HTML it is attached to:
<!doctype html>
<html>
<body>
<form>
<label for="hours">Hours: </label><input type="text" id="hours" name="hours">
<label for="rate">Rate: </label><input type="text" id="rate" name="rate">
<input type="button" name="calculate" value="Calculate">
<div id="savings"></div>
</form>
<form>
<label for="hours">Hours: </label><input type="text" id="hours" name="hours">
<label for="rate">Rate: </label><input type="text" id="rate" name="rate">
<input type="button" name="calculate" value="Calculate">
<div id="savings"></div>
</form>
</body>
</html>
I'm sure this is a really basic question but the solution is completely eluding me at this point.
