javascript - Javascript中的 "button is null"是什么意思？

Question

我刚刚开始使用 JavaScript 编码，并决定运行一些代码。 (如下图)

var handleClick = function (event) {
    alert('Hello there!');
};
var button = document.querySelector('#big-button');
button.addEventListener('click', handleClick);

但是，每当我运行代码时，它都会说按钮为空。有帮助吗？

Answer 1

来自the documentation :

Returns null if no matches are found; otherwise, it returns the first matching element.

所以，当你运行querySelector时DOM 中没有具有 ID big-button 的元素。

这通常是由于将脚本放在head中引起的并尝试访问 body 中的元素。解决这个问题的方法包括:

• 移动<script>因此它出现在您尝试访问的元素之后。这可以紧接在它之后或就在 </body> 之前。标签。
• 将代码包装在函数中并将该函数绑定(bind)为 load事件处理程序。
• 将事件监听器绑定(bind)到 window并测试event.target当事件触发时查看它是否与元素匹配。