移动端作品集开发：外部JS与CSS联动问题求助

核心问题 #

1. 外部JS文件无法运行，触发报错Uncaught TypeError: Cannot read property 'addEventListener' of null，仅内嵌JS可正常执行
2. 外部CSS定义的display-flex类无法与JS正常联动

一、外部JS运行异常的原因与修复 #

原因 #

你将外部JS脚本放在了<head>标签中加载，此时浏览器尚未渲染<body>内的DOM元素，document.getElementById("menu-button")会返回null，自然无法调用addEventListener方法。

修复方案（任选其一） #

• 方案1：移动脚本位置到body末尾
  将外部JS的引入标签移至</body>前，确保DOM渲染完成后再执行脚本：

  <!-- body内其他内容 -->
  <script src="script.js" type="text/javascript" charset="utf-8"></script>
  </body>
  

• 方案2：用DOM加载事件包裹JS代码
  在外部JS中，将逻辑包裹在DOMContentLoaded事件监听内，确保DOM就绪后执行：

  document.addEventListener('DOMContentLoaded', function() {
    let menu_button = document.getElementById("menu-button");
    let menu_elements = document.querySelector(".menu-elements");
    menu_button.addEventListener("click", (e)=>{
      alert("heijj")
    })
  });
  

• 方案3：给script标签添加defer属性
  保留脚本在<head>中的位置，添加defer属性让浏览器延迟执行脚本至DOM渲染完成：

  <script src="script.js" type="text/javascript" charset="utf-8" defer></script>
  

二、display-flex类联动异常的原因与修复 #

原因 #

1. HTML内联样式中定义的.display-flex优先级高于外部CSS同名类，且内联样式设置了height:5vh，与外部CSS中.menu-elements的height:0vh、display:none冲突
2. .menu-elements默认display:none，直接切换display-flex时，height:0vh的样式仍生效，导致视觉上无变化

修复步骤 #

1. 删除内联的display-flex样式
   移除<head>中的这段内联样式，统一通过外部CSS管理：

   <!-- 删除这段 -->
   <style type="text/css" media="all">
     .display-flex{
      display: flex;
      height: 5vh;
     }
   </style>
   

2. 调整外部CSS样式逻辑
   修改.menu-elements默认样式，新增激活类控制高度：

   .menu-elements {
     justify-content: space-around;
     height: 0;
     overflow: hidden;
     display: flex;
     transition: height 0.3s ease; /* 可选：添加过渡动画提升体验 */
   }
   /* 新增激活类替代原display-flex */
   .menu-active {
     height: 5vh;
   }
   

   注：移除.menu-elements中的!important标记，避免样式调试难度

3. 修改JS的类切换逻辑
   将原toggledisplay-flex改为切换新的menu-active类：

   let menu_button = document.getElementById("menu-button");
   let menu_elements = document.querySelector(".menu-elements");
   menu_button.onclick = ()=> {
     menu_elements.classList.toggle("menu-active");
   }
   

内容的提问来源于stack exchange，提问作者Abdullah Al Fahim