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

当前回答

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

2015-08-23 08:18:07

其他回答

把脚本放在正文标签的末尾。

<html>
    <body>
        .........
        <script src="main.js"></script>
    </body>
</html>

2020-03-22 11:08:22

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

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

2022-10-06 20:34:34

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

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

2014-09-29 19:14:37

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

2020-05-11 03:27:38

如果你的js代码是外部文件，使用这种方法:

<script src="filename.js" defer></script>

如果您的代码是内部文件，则使用DOMContentLoaded

以上两种方法将确保DOM在执行js代码之前完全加载!

2021-04-08 04:58:04

无法读取属性“addEventListener”为空

推荐文章

最新文章

标签