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

当前回答

正如其他人所说，问题是脚本在页面(特别是目标元素)加载之前执行。

但我不喜欢重新排列内容的解决方案。

首选的解决方案是在页面onload事件上放置一个事件处理程序，并在那里设置监听器。这将确保在执行赋值之前加载页面和目标元素。如

    <script>
    function onLoadFunct(){
            // set Listener here, also using suggested test for null
    }
    ....
    </script>

    <body onload="onLoadFunct()" ....>
    .....

2015-09-03 09:23:51

其他回答

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

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

2017-12-27 13:08:06

我认为最简单的方法是使用defer。不知道为什么没人发这个答案

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="style.js" defer></script>
</head>

2022-08-17 17:05:59

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

2022-07-12 14:13:53

我只是在我的脚本标签中添加了“async”，这似乎已经解决了这个问题。我不知道为什么，如果有人能解释的话，但这对我来说很有效。我的猜测是，页面不会等待脚本加载，因此页面与JavaScript同时加载。

Async/Await使我们能够以同步的方式编写异步代码。它只是使用生成器和yield语句来“暂停”执行的语法糖，使我们能够将它分配给一个变量!

这里是参考链接- https://medium.com/siliconwat/how-javascript-async-await-works-3cab4b7d21da

2018-03-11 09:44:27

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

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

2014-09-29 19:14:37

无法读取属性“addEventListener”为空

推荐文章

最新文章

标签