汉堡菜单点击事件无控制台报错但失效的问题排查与解决

从CodePen获取的菜单示例代码在原站点可正常运行，但移植到个人网站后出现两个问题：

• 点击汉堡菜单唤出移动端菜单时无反应，控制台无任何报错
• 滚动时头部背景切换功能抛出类型错误

相关代码片段 #

汉堡菜单控制代码 #

const navbarMenu = document.getElementById("menu");
const burgerMenu = document.getElementById("burger");
const headerMenu = document.getElementById("header");

// 点击汉堡按钮切换导航菜单显示/隐藏
if (burgerMenu && navbarMenu) {
   burgerMenu.addEventListener("click", () => {
      burgerMenu.classList.toggle("is-active");
      navbarMenu.classList.toggle("is-active");
   });
}

对应HTML结构 #

<!-- 头部区域 -->
<header class="header" id="header">
   <nav class="navbar container">
      <a href="#" class="brand"><img src="#"></a>
      <div class="burger" id="burger">
         <span class="burger-line"></span>
         <span class="burger-line"></span>
         <span class="burger-line"></span>
      </div>
      <div class="menu" id="menu">
         <ul class="menu-inner">
            <li class="menu-item"><a href="#" class="menu-link">菜单选项</a></li>
            <li class="menu-item"><a href="#" class="menu-link">菜单选项</a></li>
            <li class="menu-item"><a href="#" class="menu-link">菜单选项</a></li>
            <li class="menu-item"><a href="#" class="menu-link">菜单选项</a></li>
            <li class="menu-item"><a href="#" class="menu-link">菜单选项</a></li>
         </ul>
      </div>
      <a href="#" class="menu-block">菜单选项</a>
   </nav>
</header>

滚动监听代码及报错 #

// 滚动时切换头部背景样式
window.addEventListener("scroll", () => {
   if (this.scrollY >= 85) {
      headerMenu.classList.add("on-scroll");
   } else {
      headerMenu.classList.remove("on-scroll");
   }
});

滚动操作触发控制台错误：

Uncaught TypeError: Cannot read properties of null (reading 'classList')

调试验证 #

在Chrome控制台执行document.getElementById("burger")和document.getElementById("menu")，可正确获取对应DOM元素，排除元素不存在的问题。

最终解决方法 #

为脚本引入标签添加defer属性：

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

添加后，汉堡菜单点击响应和滚动头部样式切换功能均恢复正常。

内容的提问来源于stack exchange，提问作者Patrick Ben