什么是“button is null”?在Javascript中意味着

What does "button is null" in Javascript mean?

本文关键字：Javascript 意味着 null button is 什么      更新时间：2023-09-26

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

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

然而，每当我运行代码时，它都会说按钮为空。帮助吗?

来自文档:

如果没有找到匹配项则返回null;否则，返回第一个匹配的元素。

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

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

    移动<script>，使其出现在您试图访问的元素之后。这可以直接在它之后或在</body>标签之前。
  • 将代码封装在一个函数中，并将该函数绑定为load事件处理程序。
  • 将事件监听器绑定到window，并在事件触发时测试event.target，以查看它是否与元素匹配。

在本例中，这意味着当您尝试执行button.addEventListener('click', handleClick)行时，变量'button'为null。当代码执行时，如果页面上没有一个id为"big-button"的元素，则会发生这种情况，您试图通过调用document.querySelector('#big-button');

来检索该元素

将代码移动到onload块中

window.onload = function(){
    var button = document.querySelector('#big-button');
    button.addEventListener('click', handleClick);
}

<button id="big-button">click me</button>
    <script>
        var handleClick = function (event) {
            alert('Hello there!');
        };
        var button = document.querySelector('#big-button');
        button.addEventListener('click', handleClick);
    </script>
相关文章：