我必须使用香草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,但不确定。


当前回答

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

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

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

其他回答

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

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

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

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

我最近得到了这个问题,我发现我在getElementById和querySelector中提供了一个错误的类名。所以,我建议也交叉检查你的脚本和html文件中的类名和id名。

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

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

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

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

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