为什么我的头部选择中的 javascript 代码无法获取元素？答案

【问题标题】：Why can't my javascript code in the head selection get an element?为什么我的头部选择中的 javascript 代码无法获取元素？
【发布时间】：2014-01-09 01:14:27
【问题描述】：

我已经在 javascript 中研究 pi 计算器很长时间了，我终于完成了。问题是我的脚本在头部：

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

我的身体部分有这个：

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

但是当我打开网页时，出现以下错误：“null 不是对象，正在评估 document.getElementById("button").addEventListener"

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

谢谢。

【问题讨论】：

页面上尚不存在该元素。为避免这种情况，请考虑将您的<script></script> 移动到您的身体底部（即<script></script></body></html>）
要么做一个window.onload = function()，要么将它附加到结束</body>标签之后。
@pattmorter 在结束 </body> 标记之前。除了</html>之外，什么都不应该在</body>之后。
@War10ck 嗯，既然在页面的head部分，javascript应该能找到元素。
@Progo 不正确。仅当它包含在 onload 事件中时。 JavaScript 被加载并立即解析。这会停止 HTML 的加载/呈现，直到 JavaScript 解析完成。（即元素 不会在 JavaScript 解析时加载到页面上）

标签： javascript

【解决方案1】：

将其包装在窗口 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

【讨论】：

这绝对是一个可能的解决方案，+1
你知道，我不禁想知道为什么这个答案最近得到了 1 票。
@ManofSnow 是的，现在可以了，它说我必须等待几分钟，然后我就睡着了。

【解决方案2】：

你有两个选择：

将您的代码封装在 window.onload 事件中。
将<script></script> 放在正文底部</body> 之前。

【讨论】：

【解决方案3】：

Javascript 会尽快执行，所以当它在 head 标签中时，文档还没有完全加载。当文档准备好时，您甚至可以使用负载运行代码

window.addEventListener("load", function(){
    /*your code here*/
});

我猜 window 应该是正确的方法，即使有人会认为 document.load 会在那里（“当文档加载时，执行此操作”而不是“当窗口加载时执行此操作”）或在正文末尾运行您的代码。您仍然可以将所有方法放在头脑中。

【讨论】：