javascript - JavaScript时钟

我在代码中遇到了麻烦，下面的代码适用于完美运行的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();

这一项有效，但是不会像另一项那样更新，您必须手动刷新页面。

我究竟做错了什么？

最佳答案

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

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，您将看到这些错误以及它们在代码中的确切位置。