Question

无法读取 null 的属性“addEventListener”

2014-09-29

1279556

javascript function getelementbyid addeventlistener

我必须在一个项目中使用原生 JavaScript。我有几个函数，其中一个是打开菜单的按钮。它在目标 id 存在的页面上有效，但在 id 不存在的页面上会导致错误。在那些函数找不到 id 的页面上，我收到“无法读取 null 的属性‘addEventListener’”错误，并且我的其他函数都不起作用。

以下是打开菜单的按钮的代码。

function swapper() {
toggleClass(document.getElementById('overlay'), 'open');
}

var el = document.getElementById('overlayBtn');
el.addEventListener('click', swapper, false);

var text = document.getElementById('overlayBtn');
text.onclick = function(){
this.innerHTML = (this.innerHTML === "Menu") ? "Close" : "Menu";
return false;
};

我该如何处理这个问题？我可能需要将此代码全部包装在另一个函数中或使用 if/else 语句，以便它仅在特定页面上搜索 id，但不确定具体情况。

Answer 1

我认为最简单的方法是在添加事件监听器之前检查 el 是否不为空：

const el = document.getElementById('overlayBtn');
if (el) {
  el.addEventListener('click', swapper, false);
}

您也可以等到 DOMContentLoaded 完成后再运行代码：

window.addEventListener("DOMContentLoaded", (event) => {
    const el = document.getElementById('overlayBtn');
    if (el) {
      el.addEventListener('click', swapper, false);
    }
});

Answer 2

看起来 document.getElementById('overlayBtn'); 返回的是 null ，因为它在 DOM 完全加载之前执行。

如果您将这行代码放在

window.onload=function(){
  -- put your code here
}

下，那么它将正常运行。

示例：

window.onload=function(){
    var mb = document.getElementById("b");
    mb.addEventListener("click", handler);
    mb.addEventListener("click", handler2);
}


function handler() {
    $("p").html("<br>" + $("p").text() + "<br>You clicked me-1!<br>");
}

function handler2() {
    $("p").html("<br>" + $("p").text() + "<br>You clicked me-2!<br>");
}

Answer 3

我也遇到过类似的情况。这可能是因为脚本在页面加载之前执行。通过将脚本放在页面底部，我规避了这个问题。