JavaScript时钟

Question

我在我的代码中遇到了一个问题，下面的代码是一个完美工作的JavaScript时钟：

function renderTime() {
    var currentTime = new Date();
    var diem = "AM";
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
    var s = currentTime.getSeconds();

    if(h == 0) {
        h = 12;
    } else if(h > 12) {
        h = h - 12;
        diem = "PM";
    }
    if(h < 10) {
        h = "0" + h;
    }
    if(m < 10) {
        m = "0" + m;
    }
    if(s < 10) {
        s = "0" + s;
    }
    var myClock = document.getElementById('clockDisplay');
    myClock.textContent = h + ":" + m + ":" + s + " " + diem;
    myClock.innerHTML = h + ":" + m + ":" + s + " " + diem;
    myClock.innerText = h + ":" + m + ":" + s + " " + diem;
    setTimeout('renderTime()',1000);

}
renderTime();

然而，我现在尝试做一些稍微不同的事情，如下所示：

function makeTime() {
    var currentTime = new Date();
    var diem = "AM";
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
    var s = currentTime.getSeconds();

    if(h == 0) {
        h = 12;
    } else if(h > 12) {
        h = h - 12;
        diem = "PM";
    }
    if(h < 10) {
        h = "0" + h;
    }
    if(m < 10) {
        m = "0" + m;
    }
    if(s < 10) {
        s = "0" + s;
    }
    var clock = document.getElementById('clock');
    clock.innerHTML = "<h1>"+h+":"+m+":"+s+":"+diem+"</h1>";
    myClock.textContent = "<h1>"+h+":"+m+":"+s+":"+diem+"</h1>";
    myClock.innerText = "<h1>"+h+":"+m+":"+s+":"+diem+"</h1>";
    setTimeout('makeTime()',1000);
}
makeTime();

这个可以工作，但是不会像另一个一样更新，您必须手动刷新页面。

我做错了什么？

Answer 1

将变量重命名为clock后，您将继续在第二个版本中引用myClock

var clock = ...
clock.innerHtml = ...
myClock.textContent = "<h1>"+h+":"+m+":"+s+":"+diem+"</h1>";
myClock.innerText = "<h1>"+h+":"+m+":"+s+":"+diem+"</h1>";
setTimeout('makeTime()',1000);

这会导致错误(reference error: myClock is not defined)，从而阻止执行流到达您的setTimeout调用。

你应该学会使用可用的工具。每种浏览器都有一种向开发人员报告JavaScript错误的方法。在Webkit/IE10中打开开发人员控制台，或者在Firefox中打开Firebug，您将看到这些错误以及它们在代码中发生的确切位置。