javascript - 为什么我在 head 选择中的 javascript 代码无法获取元素？

Question

我已经在 javascript 中开发圆周率计算器很长时间了，我终于完成了。问题是我在 head 部分的脚本:

document.getElementById("button").addEventListener('click', (function(){
    alert('Beginning…');
}), false);

我的正文部分有这个:

<input type="button" id="button" value="Calculate!!"/>

但是当我打开网页时，出现以下错误:“null is not an object, evaluating document.getElementById("button").addEventListener”

有谁知道为什么我的代码不能正常运行？

谢谢。

Answer 1

将其包裹在window onload 事件中:

window.onload = function()
{
    document.getElementById("button").addEventListener('click', (function(){
        alert('Beginning…');
    }), false);
};

或

window.addEventListener('load', function()
{
    document.getElementById("button").addEventListener('click', (function(){
        alert('Beginning…');
    }), false);
});

或者，如果您的脚本不必位于head，请将其放在 ID 为button 的元素之后。

DEMO