onblur事件未触发

我不知道为什么不这样做，我不想花很多时间在上面。有人有什么想法吗？

<!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>

已邀请:

3 个回复

布埃郝卞簿

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

它似乎起作用。