无法读取 null 的属性“addEventListener”

javascript function addeventlistener getelementbyid

2022-08-30 01:23:01

我必须使用vanilla JavaScript来做一个项目。我有几个功能，其中一个是打开菜单的按钮。它适用于存在目标 ID 的网页，但在不存在该标识的网页上会导致错误。在那些函数找不到id的页面上，我收到“无法读取空的属性'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，但不确定确切。

答案 1

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

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

答案 2

它似乎正在返回，因为它在DOM完全加载之前执行。document.getElementById('overlayBtn');null

如果将此行代码放在

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