无法读取属性“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，但不确定。

当前回答

当我试图通过Id获取一个类的元素时，我遇到了这个问题。检查并确认通过正确的属性(例如id或class)获取元素。否则就会出现这个错误

2022-03-22 00:09:58

其他回答

这是因为在执行bundle js时元素还没有加载。

我将移动<script src="sample.js" type="text/javascript"></script>到index.html文件的底部。这样可以确保在解析和呈现所有html元素之后执行脚本。

2017-12-27 13:08:06

我也有同样的问题，但我的本我是存在的。所以我试着加上“window”。Onload = init;"然后我用init函数包装了我的原始JS代码(你想叫它什么都行)。这是有效的，所以至少在我的情况下，我在加载文档之前添加了一个事件侦听器。这也可能是你正在经历的。

2020-05-11 03:27:38

我认为最简单的方法是加一个'?el前的问号:

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

2022-07-25 13:01:39

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

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

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

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

2015-05-05 21:16:17

我遇到了同样的问题，并检查null，但它没有帮助。因为脚本是在页面加载之前加载的。因此，只需将脚本放在结束体标记之前就可以解决问题。

2020-02-10 09:31:25

无法读取属性“addEventListener”为空

推荐文章

最新文章

标签