為什么getElementsByClassName返回未定義？

Question

我正在制作一個基本的計數器，該計數器可以計算直到日期為止的天數，小時數，分鍾數和秒數。 我能夠找到有關如何制作此零件的教程。 我在第48行輸入元素[i] .innerHTML時不斷收到錯誤消息。 就是說在那個時候元素是不確定的。 我進行了一些故障排除，發現在switch語句之后元素變得不確定。 為什么是這樣？

<html>
<a class="test" name="Christmas"></a>
<a class="test" name="New Year"></a>
<a class="test" name="Halloween"></a>

<script>
// javascript
var elements = document.getElementsByClassName("test");
var text = '';
var target_date = new Date().getTime();
for(var i=0; i<elements.length; i++) {
document.write(elements[i]);
switch(elements[i].name){
case "Christmas": 
target_date = new Date("Dec 25, 2014").getTime();
text = "Time until Christmas: ";
break;
case "New Year":
target_date = new Date("Jan 1, 2015").getTime();
text= "Time until the New Year: ";
break;
case "Halloween":
target_date = new Date("Oct 31, 2014").getTime();
text = "Time until Halloween: ";
break;
}
// variables for time units
var days, hours, minutes, seconds;

// update the tag with id "countdown" every 1 second
setInterval(function () {

// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;

// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;

hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;

minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);

// format countdown string + set tag value
elements[i].innerHTML = text + days + "d, " + hours + "h, "
+ minutes + "m, " + seconds + "s";  

}, 1000);
}
 </script>
</html>

如果要選擇添加更多日期，我想繼續使用switch和for循環來完成此任務。

Answer 1

setInterval在函數運行后執行，此時i已增加到4。您應該在元素上創建一個閉包以保留它

setInterval(runnable(elements[i], text, target_date), 1000);

// also pass target_date since it is needed
function runnable(el, text, target_date) {
    return function () {
        // find the amount of "seconds" between now and target
        var current_date = new Date().getTime();
        var seconds_left = (target_date - current_date) / 1000;

        // do some time calculations
        days = parseInt(seconds_left / 86400);
        seconds_left = seconds_left % 86400;

        hours = parseInt(seconds_left / 3600);
        seconds_left = seconds_left % 3600;

        minutes = parseInt(seconds_left / 60);
        seconds = parseInt(seconds_left % 60);

        // format countdown string + set tag value
        el.innerHTML = text + days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s";
    }
}

演示： http ： //jsfiddle.net/87zbG/1/

Answer 2

var elements = document.getElementsByClassName("test");
var ele = '';
var target_date = new Date().getTime();
for (i = 0; i < elements.length; i++) {
    switch (elements[i].name) {
        case "Christmas":
            target_date = new Date("Dec 25, 2014").getTime();
            text = "Time until Christmas: ";
            break;
        case "New Year":
            target_date = new Date("Jan 1, 2015").getTime();
            text = "Time until the New Year: ";
            break;
        case "Halloween":
            target_date = new Date("Oct 31, 2014").getTime();
            text = "Time until Halloween: ";
            break;
    }
    // variables for time units
    var days, hours, minutes, seconds;

    //make a reference to element here
    ele = elements[i];

    // update the tag with id "countdown" every 1 second
    setInterval(function () {

        // find the amount of "seconds" between now and target
        var current_date = new Date().getTime();
        var seconds_left = (target_date - current_date) / 1000;

        // do some time calculations
        days = parseInt(seconds_left / 86400);
        seconds_left = seconds_left % 86400;

        hours = parseInt(seconds_left / 3600);
        seconds_left = seconds_left % 3600;

        minutes = parseInt(seconds_left / 60);
        seconds = parseInt(seconds_left % 60);

        // format countdown string + set tag value
        ele.innerHTML = text + days + "d, " + hours + "h, " + minutes + "m, " + seconds + "s";

    }, 1000);
}

http://jsfiddle.net/Mte5w/

Answer 3

我想這里有范圍的問題。 嘗試從“元素”變量的聲明中刪除“ var”關鍵字。 它將使元素具有全局性。 它應該工作。

為什么getElementsByClassName返回未定義？

問題描述

3 個解決方案

解決方案1
2 已采納 2014-01-02 04:14:20

解決方案2
0 2014-01-02 04:24:56

解決方案3
-2 2014-01-02 04:13:18

為什么getElementsByClassName返回未定義？

問題描述

3 個解決方案

解決方案1 2 已采納 2014-01-02 04:14:20

解決方案2 0 2014-01-02 04:24:56

解決方案3 -2 2014-01-02 04:13:18

解決方案1
2 已采納 2014-01-02 04:14:20

解決方案2
0 2014-01-02 04:24:56

解決方案3
-2 2014-01-02 04:13:18