onblur event not firing
I am not sure why this is not firing and I didnt want to spend a whole lot of time working on it. Does anyone have any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<SCRIPT TYPE="text/javascript">
function getTimes(){
var minuteOne = document.getElementById(minOne).value;
var minuteTwo = document.getElementById(minTwo).value;
var minuteThree = document.getElementById(minThree).value;
var minuteFour = document.getElementById(minFour).value;
var minuteFive = document.getElementById(minFive).value;
var hourOne = document.getElementById(hourOne).value;
var hourTwo = document.getElementById(hourTwo).value;开发者_JS百科
var hourThree = document.getElementById(hourThree).value;
var hourFour = document.getElementById(hourFour).value;
var hourFive = document.getElementById(hourFive).value;
var totalMinutes = minuteOne + minuteTwo + minuteThree + minuteFour + minuteFive;
var extraHours = totalMinutes / 60;
var minutesLeft = totalMinutes % 60;
var totalHours = hourOne + hourTwo + hourThree + hourFour + hourFive + extraHours;
document.getElementById(totalMinute).value = minuteLeft;
document.getElementById(totalHour).value = totalHours;
}
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Time Calculator</title>
</head>
<body>
<table>
<tr align="center">
<td>Day</td><td>Hour</td><td>Minutes</td>
</tr>
<tr>
<td>Monday</td><td><input name="hourOne" id="hourOne" type="text" size="5" maxlength="5" value="0" onblur="getTimes()" /></td><td><input name="minOne" id="minOne" type="text" size="5" maxlength="5" value="0" onblur="getTimes()" /></td>
</tr>
<tr>
<td>Tuesday</td><td><input name="hourTwo" id="hourTwo" type="text" size="5" maxlength="5" value="0" onblur="getTimes()" /></td><td><input name="minTwo" id="minTwo" type="text" size="5" maxlength="5" value="0" onblur="getTimes()"/></td>
</tr>
<tr>
<td>Wednesday</td><td><input name="hourThree" id="hourThree" type="text" size="5" maxlength="5" value="0" onblur="getTimes()" /></td><td><input name="minThree" id="minThree" type="text" size="5" maxlength="5" value="0" onblur="getTimes()" /></td>
</tr>
<tr>
<td>Thursday</td><td><input name="hourFour" id="hourFour" type="text" size="5" maxlength="5" value="0" onblur="getTimes()" /></td><td><input name="minFour" id="minFour" type="text" size="5" maxlength="5" value="0" onblur="getTimes()" /></td>
</tr>
<tr>
<td>Friday</td><td><input name="hourFive" id="hourFive" type="text" size="5" maxlength="5" value="0" onblur="getTimes()" /></td><td><input name="minFive" id="minFive" type="text" size="5" maxlength="5" value="0" onblur="getTimes()" /></td>
</tr>
<tr>
<td>Total Time</td><td><input name="totalHour" id="totalHour" type="text" size="5" maxlength="5" value="0" /></td><td><input name="totalMinute" type="text" id="totalMinute" size="5" maxlength="5" value="0" /></td>
</tr>
</table>
<input name="getTime" type="button" value="Get Time" onclick="getTimes()" />
</body>
</html>
document.getElementById takes a string. You are giving it an undeclared value:
var minuteOne = document.getElementById(minOne).value;
should be
var minuteOne = document.getElementById("minOne").value;
Notice the quotes. Secondly, this line: minuteOne + minuteTwo + minuteThree + minuteFour + minuteFive is concating strings, not doing addition. You need to call parseInt on all of the values so they do addition, not concat the strings.
Thirdly, this line
document.getElementById('totalMinute').value = minuteLeft;
should be
document.getElementById('totalMinute').value = minutesLeft;
Looks like you had a typo referencing your variable. With all of the fixes applied, the JavaScript looks like this:
function getTimes(){
var minuteOne = parseInt(document.getElementById('minOne').value);
var minuteTwo = parseInt(document.getElementById('minTwo').value);
var minuteThree = parseInt(document.getElementById('minThree').value);
var minuteFour = parseInt(document.getElementById('minFour').value);
var minuteFive = parseInt(document.getElementById('minFive').value);
var hourOne = parseInt(document.getElementById('hourOne').value);
var hourTwo = parseInt(document.getElementById('hourTwo').value);
var hourThree = parseInt(document.getElementById('hourThree').value);
var hourFour = parseInt(document.getElementById('hourFour').value);
var hourFive = parseInt(document.getElementById('hourFive').value);
var totalMinutes = minuteOne + minuteTwo + minuteThree + minuteFour + minuteFive;
var extraHours = Math.floor(totalMinutes / 60);
var minutesLeft = totalMinutes % 60;
var totalHours = hourOne + hourTwo + hourThree + hourFour + hourFive + extraHours;
document.getElementById('totalMinute').value = minutesLeft;
document.getElementById('totalHour').value = totalHours;
}
And it appears to work.
document.getElementById(totalMinute).value = minuteLeft;
should be
document.getElementById(totalMinute).value = minutesLeft;
Always check your variable names.
getElementById(minOne)
You're passing minOne, etc in as variables when you are actually trying to use them as literal strings. Put them in quotation marks instead, ie..
getElementById("minOne")
加载中,请稍侯......
精彩评论