秒表不工作

Question

我在网上找到了这个秒表教程，但是当我尝试实现它时，当我检查元素时，它一直在控制台中显示 "TypeError: start is null" 和 "TypeError: h1 is undefined"。更让我烦恼的是，当我在这里插入代码时它可以工作，如果我将它放入记事本++它就不起作用。有没有我在实施过程中可能遗漏的 jquery 文件，以及代码片段是如何让它工作的？

var h1 = document.getElementsByTagName('h1')[0],
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t;

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }
    
    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}
timer();


/* Start button */
start.onclick = timer;

/* Stop button */
stop.onclick = function() {
    clearTimeout(t);
}

/* Clear button */
clear.onclick = function() {
    h1.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}

<h1><time>00:00:00</time></h1>
<button id="start" >start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>

Answer 1

将所有代码（包括函数）包装在一个您可以命名为 initialize() { } 的通用函数中。

然后，在您的 <body> 标签上添加函数绑定 onload 事件，如下所示：

<body onload="initialize()">

这会告诉您的代码不要执行，除非整个 DOM 和元素都已创建，因为除非它们都已完全加载，否则您无法访问您的元素。

Answer 2

您可能在 HTML 之前定义了 Javascript。请记住 Javascript 是一种阻塞语言，因此它将停止所有操作（包括加载 HTML）直到脚本完成。

将脚本移至 HTML 下方或使用某种形式的 $(document)ready

秒表不工作

Stopwatch Not working

html

javascript

jquery

stopwatch