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>

如果我选择添加更多日期，我想继续使用开关和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

我猜有范围问题。尝试从'elements'变量的声明中删除'var'关键字。它将使元素全球化。它应该工作。

为什么getElementsByClassName返回undefined？

3 个答案: