感谢@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;
  };
}

这个问题已经有答案了，但我喜欢对这些简单的条件使用逻辑AND(&&)操作符:

var el = document.getElementById('overlayBtn');

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

在我看来更易于阅读和简洁。

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

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

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

您可以将属性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就运行脚本

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

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

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