如何检索文档元素 - 文档就绪

Question

有人可以解释为什么这个按钮不起作用？ 我的控制台中的错误表明var button = document.getElementById('next'); 返回null 。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        ...
    </script>
</head>
<body>
    <button id="next">Say hi</button>
</body>
</html>

使用Javascript：

var button = document.getElementById('next');
function sayHi(){
    alert('Hi there');
}

button.addEventListener('click',sayHi,false);

谢谢你的帮助

Answer 1

加载HTML 后运行JS。 当您在头部调用JS时，该按钮尚不存在，它在调用JS后呈现。

这将有效：

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <button id="next">Say hi</button>
    <script type="text/javascript">
        ...
    </script>
</body>
</html>

Answer 2

在脚本运行时，您没有next id的元素。

移动<script>元素，使其出现在具有该id 或的元素之后
将脚本的内容包装在函数中，并将该函数绑定为将在元素存在之后运行的事件的事件处理程序

例如

function sayHi(){
    alert('Hi there');
}

function setUpButton() {
    var button = document.getElementById('next');
    button.addEventListener('click',sayHi,false);
}

addEventListener('load', setUpButton);

Answer 3

您的脚本运行得太早，您的DOM（文档对象模型） 尚未就绪 。
如果您的<script>位于文档的<head> ，请使用onreadystatechange （现代浏览器）：

DOM准备好了 - 在`<head>`里面

<script>
document.onreadystatechange = function () { 
    if(document.readyState === "interactive") { // use "complete" as a 'load' alternative
         /* (DOM is now read and ready to be manipulated) your code here */
    }
}
</script>
</head>

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/readystatechange
https://developer.mozilla.org/en/docs/web/api/document/readystate

DOM就绪 - 在结束之前`</body>`

如果您需要支持IE8 <在结束</body>标记之前放置所有JS：

<!-- Your page elements before the script tag -->

<script>
   /* (DOM is now read and ready to be manipulated) your code here */
</script>
</body>

Answer 4

您已将脚本定位为在文档完全呈现之前运行，因此无法找到该按钮。 在文档末尾运行脚本，即

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<button id="next">Say hi</button>
<script>
    ...
</script>
</body>

如何检索文档元素 - 文档就绪

问题描述

4 个解决方案

解决方案1
4 2014-01-15 10:27:35

解决方案2
2 已采纳 2014-01-15 10:27:46

解决方案3
1 2014-01-15 10:29:47

DOM准备好了 - 在`<head>`里面

DOM就绪 - 在结束之前`</body>`

解决方案4
0 2014-01-15 10:30:41

如何检索文档元素 - 文档就绪

问题描述

4 个解决方案

解决方案1 4 2014-01-15 10:27:35

解决方案2 2 已采纳 2014-01-15 10:27:46

解决方案3 1 2014-01-15 10:29:47

DOM准备好了 - 在<head>里面

DOM就绪 - 在结束之前</body>

解决方案4 0 2014-01-15 10:30:41

解决方案1
4 2014-01-15 10:27:35

解决方案2
2 已采纳 2014-01-15 10:27:46

解决方案3
1 2014-01-15 10:29:47

DOM准备好了 - 在`<head>`里面

DOM就绪 - 在结束之前`</body>`

解决方案4
0 2014-01-15 10:30:41