如何解决main.js:11 Uncaught TypeError: Cannot read property 'addEventListener' of null错误

这个错误的核心很明确：你代码里的menuBtn变量是null，意味着document.querySelector('.menu-btn')没有找到任何匹配的DOM元素，自然没法调用addEventListener方法。下面我帮你拆解可能的原因和对应的解决办法：

可能的原因 #

• 脚本执行时机过早：浏览器是从上到下解析HTML的，如果你的JavaScript代码放在<head>标签里，或者放在<body>里但在.menu-btn元素之前，那么当脚本运行时，这个元素还没被浏览器创建出来，querySelector自然找不到它，返回null。
• 类名不匹配：检查你的HTML代码里，目标元素的class是不是真的叫menu-btn——可能是拼写错误（比如写成menu-button）、大小写不一致（比如HTML里是MenuBtn），或者多了/少了空格，这些都会导致querySelector匹配失败。
• 目标元素不存在：极端情况是你的HTML里根本没有带menu-btn类的元素，那querySelector肯定返回null。

解决办法 #

1. 调整脚本位置 #

把你的JavaScript代码放在HTML文档的最底部，也就是</body>闭合标签的前面。这样当脚本执行时，所有DOM元素都已经被浏览器解析并创建完成了：

<body>
  <!-- 你的所有HTML内容 -->
  <script src="main.js"></script>
</body>

2. 监听DOM加载完成事件 #

如果不想调整脚本位置，可以把代码包裹在DOMContentLoaded事件监听里，确保只有当DOM完全加载后才执行你的代码：

document.addEventListener('DOMContentLoaded', function() {
  // Select DOM Items
  const menuBtn = document.querySelector('.menu-btn');
  const menu = document.querySelector('.menu');
  const menuNav = document.querySelector('.menu-nav');
  const menuBranding = document.querySelector('.menu-branding');
  const navItems = document.querySelectorAll('.nav-item');
  // Set Initial State Of Menu
  let showMenu = false;
  menuBtn.addEventListener("click", toggleMenu);
  
  function toggleMenu() {
    if (!showMenu) {
      menuBtn.classList.add('close');
      menu.classList.add('show');
      menuNav.classList.add('show');
      menuBranding.classList.add('show');
      navItems.forEach(item => item.classList.add('show'));
      showMenu = true;
    } else {
      menuBtn.classList.remove('close');
      menu.classList.remove('show');
      menuNav.classList.remove('show');
      menuBranding.classList.remove('show');
      navItems.forEach(item => item.classList.remove('show'));
      showMenu = false;
    }
  }
});

3. 检查并修正类名 #

仔细核对HTML中目标元素的class属性，确保和你代码里的.menu-btn完全一致——包括拼写、大小写、空格，比如HTML里应该是：

<button class="menu-btn">菜单按钮</button>

4. 调试验证 #

可以在定义menuBtn后加一行调试代码，确认它的值：

const menuBtn = document.querySelector('.menu-btn');
console.log(menuBtn); // 如果输出null，说明确实没找到元素；如果输出元素对象，那问题可能出在其他地方

内容的提问来源于stack exchange，提问作者Shivam Purohit