2011-06-13 161 views
0

我不知道爲什麼這不是解僱,我也不想花費大量的時間在它上面工作。有沒有人有任何想法?onblur event not firing

<!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; 
     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> 
+0

@jambriz哇,真是一個兩歲的問題 – shinjuo 2014-05-20 17:33:56

回答

4

document.getElementById需要一個字符串。你給它一個未聲明價值:

var minuteOne = document.getElementById(minOne).value; 

應該

var minuteOne = document.getElementById("minOne").value; 

注意引號。其次,這一行:minuteOne + minuteTwo + minuteThree + minuteFour + minuteFive是串聯字符串,而不是添加。您需要在所有值上調用parseInt,以便它們添加,而不是連接字符串。

第三,這條線

document.getElementById('totalMinute').value = minuteLeft; 

應該

document.getElementById('totalMinute').value = minutesLeft; 

看起來像你有一個錯字引用您的變量。應用了所有修復程序後,JavaScript看起來像這樣:

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; 
} 

而且它似乎工作。

+0

一個討厭的評論說,沒有解決問題 – shinjuo 2011-06-13 18:00:50

+0

@shinjuo編輯包含發現的其他錯誤。 – vcsjones 2011-06-13 18:01:31

+0

我做了最後一分鐘的修改,添加'var extraHours = Math.floor(totalMinutes/60); '使小時文本框不包含分鐘的小數部分。 – vcsjones 2011-06-13 18:10:47

1

document.getElementById(totalMinute).value = minuteLeft;

應該

document.getElementById(totalMinute).value = minutesLeft;

經常檢查您的變量名。

1
getElementById(minOne) 

你在路過MINONE等作爲變量時,你實際上是試圖用它們作爲文字字符串。把它們放在引號代替,即..

的getElementById(「MINONE」)