代码在控制台运行正常，引入文件后报Cannot read properties of null (reading 'style')错误

问题原因 #

你遇到的报错是脚本执行时部分DOM元素未成功获取，导致操作空值抛出异常，后续事件绑定逻辑直接中断，而你手动粘贴到控制台执行时页面已经完全渲染，所有元素都能正常获取，所以运行正常。具体触发原因有3个：

1. 执行时序冲突：type="module"的脚本默认自带defer效果，会在DOM解析完成后自动执行，你额外绑定了window.onload，部分浏览器下时序异常会导致元素获取失败。
2. 空值判断不全：仅在menuBtnChange的if分支给closeBtn加了可选链，else分支直接操作closeBtn，一旦元素获取失败直接抛错。
3. 初始执行无校验：函数刚执行就直接操作sidebar、logout、joinRoom等元素，只要任意一个元素不存在，代码直接中断，后续的点击事件绑定完全不会执行。

修复方案 #

替换你的原有script代码即可：

<script type="module">
  let sidebar = document.querySelector(".sidebar");
  let closeBtn = document.getElementById("btn");
  let userBtn = document.querySelector(".bx-user");
  let joinRoom = document.querySelector(".joinRoom");
  let logout = document.querySelector(".logout");

  // 核心元素不存在直接终止逻辑，避免报错
  if (!sidebar || !closeBtn || !userBtn || !joinRoom || !logout) {
    console.warn("侧边栏相关DOM元素缺失，请检查类名/ID是否正确");
    return
  }

  function menuBtnChange() {
    if(sidebar.classList.contains("open")){
      closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");
      logout.style.width="250px";
      joinRoom.style.width="250px";

      document.querySelectorAll(".parahide").forEach(el => {
        el.style.visibility = "visible";
      });
    } else {
      closeBtn.classList.replace("bx-menu-alt-right","bx-menu");
      logout.style.width="78px";
      joinRoom.style.width="78px";

      document.querySelectorAll(".parahide").forEach(el => {
        el.style.visibility = "hidden";
      });
    }
  }
  sidebar.classList.toggle("open");
  menuBtnChange();

  closeBtn.addEventListener("click", ()=>{
    sidebar.classList.toggle("open");
    menuBtnChange();
  });

  userBtn.addEventListener("click", ()=>{
    sidebar.classList.toggle("open");
    menuBtnChange();
  });

  joinRoom.addEventListener("click", ()=>{
    sidebar.classList.toggle("open");
    menuBtnChange();
  });
  logout.addEventListener("click", ()=>{
    sidebar.classList.toggle("open");
    menuBtnChange();
  });
</script>

修复说明 #

• 移除了多余的defer属性和window.onload绑定，符合module脚本的执行逻辑
• 新增核心元素非空校验，元素缺失时直接给出提示不会抛错中断页面
• 统一了parahide元素的遍历写法，避免传统for循环的变量提升问题

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