无法读取 null 的属性“addEventListener”

Question

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

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

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，但不确定。

原文由 morocklo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Rob M. 发布，翻译遵循 CC BY-SA 3.0 许可协议

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>");
}

原文由 Dilip Agheda 发布，翻译遵循 CC BY-SA 3.0 许可协议