有人可以解释为什么这个按钮不起作用？我的控制台中的错误表明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);
感谢您的帮助
答案 0 :(得分：4)
在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>
答案 1 :(得分：2)
在脚本运行时，您没有标识为next的元素。
<script>元素，使在之后显示 或 e.g。
function sayHi(){
alert('Hi there');
}
function setUpButton() {
var button = document.getElementById('next');
button.addEventListener('click',sayHi,false);
}
addEventListener('load', setUpButton);
答案 2 :(得分：1)
您的脚本运行得太早，您的DOM（文档对象模型）尚未准备就绪
如果您的<script>位于文档的 <head> 内，请使用onreadystatechange（现代浏览器）：
<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
</body> 如果您需要支持IE8＆lt;将所有JS放在结束</body>标记之前：
<!-- Your page elements before the script tag -->
<script>
/* (DOM is now read and ready to be manipulated) your code here */
</script>
</body>
答案 3 :(得分：0)
您已将脚本定位为在文档完全呈现之前运行，因此无法找到该按钮。 在文档末尾运行脚本，即
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<button id="next">Say hi</button>
<script>
...
</script>
</body>