无法读取属性“addEventListener”为空

我必须使用香草JavaScript的项目。我有几个功能，其中之一是打开菜单的按钮。它在目标id存在的页面上工作，但在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，但不确定。

当前回答

使用可选的链接操作符(?.)将在元素不存在的页面上返回undefined，而不是抛出错误。例子;

el?.addEventListener('click', swapper, false);

2022-10-06 20:34:34

其他回答

我得到了同样的错误，但执行空检查似乎没有帮助。

我找到的解决方案是将我的函数包装在整个文档的事件侦听器中，以检查DOM何时完成加载。

document.addEventListener('DOMContentLoaded', function () {
    el.addEventListener('click', swapper, false);
});

我想这是因为我使用的框架(Angular)正在动态地改变我的HTML类和ID。

2015-05-05 21:16:17

感谢@Rob M.的帮助。这是最后一段代码的样子:

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

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

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

2014-09-29 19:30:26

当“元素不存在于DOM中”或id或类名不存在，但您在脚本文件中请求时，也会发生此错误。因此，您调用的事件为空。

2022-07-12 14:13:53

您可以将属性defer添加到脚本标记中。您看到这个错误的原因是因为脚本在DOM加载之前运行。

<！DOCTYPE html > < html lang =“en”> < >头 < meta charset = " utf - 8 " > <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <标题>文档< /名称> <link rel="stylesheet" href="css/styles.css"> <script src="scripts/main.js" defer="defer"></script> .js > < /头

Defer是一个布尔值，表示一旦解析完DOM就运行脚本

2021-08-18 16:42:58

脚本在主体之前加载，在主体之后保留脚本

2020-01-17 11:24:56

无法读取属性“addEventListener”为空

推荐文章

最新文章

标签