querySelectorAll返回null，点击service-option元素无响应问题排查

问题原因 #

你的JavaScript代码在DOM元素完全加载前就执行了：

• 脚本标签<script src="/javascript/script.js"></script>放在了<head>中，浏览器解析到这里会立即执行JS，此时<body>里的.service-option元素还未被渲染到DOM中。
• document.querySelectorAll(".service-option")会返回空的NodeList（并非严格意义上的null，但遍历逻辑不会触发），导致点击事件无法绑定到目标元素上。
• 你尝试的document.getElementsByClassName返回的是动态集合，但如果循环逻辑同样在DOM加载前执行，当时集合为空，后续元素加载后集合会更新，但绑定事件的循环已经执行完毕，所以依然无法生效。

解决方案 #

有三种可靠的修复方式，任选其一即可：

方式1：将脚本移到body末尾 #

把<script src="/javascript/script.js"></script>移动到</body>标签的上方，确保DOM完全渲染后再执行JS：

<!-- 修改后的index.html -->
<body>
  <!-- 所有DOM元素 -->
  <footer id="footer">© Copyright, IXD5205, Kee-Fung Anthony Ho, 2023.</footer>
  <script src="/javascript/script.js"></script>
  <script src="https://kit.fontawesome.com/fe76fcb7fd.js" crossorigin="anonymous"></script>
</body>

方式2：使用DOMContentLoaded事件包裹代码 #

在JS中监听DOMContentLoaded事件，确保DOM加载完成后再执行元素查询和事件绑定：

// 修改后的script.js
console.log("JS is here");

document.addEventListener('DOMContentLoaded', function() {
  const serviceOptions = document.querySelectorAll(".service-option");
  console.log(serviceOptions);

  serviceOptions.forEach((serviceOption) => {
    serviceOption.addEventListener("click", generateRoute);
  });
});

function generateRoute() {
  console.log("click registered");
  const serviceTitle = document.getElementById("service-title");
  const serviceContainer = document.getElementById("service-container");
  const routingTitle = document.getElementById("routing-title");
  const routingContainer = document.getElementById("routing-container");
  const profileHead = document.getElementById("profile-head");

  serviceTitle.style.display = "none";
  serviceContainer.style.display = "none";
  profileHead.style.display = "none";

  routingTitle.style.display = "block";
  routingContainer.style.display = "block";

  console.log("generateRoute function is activated and service elements should be gone and routing elements should be showing");
}

方式3：给script标签添加defer属性 #

给<head>中的script标签添加defer属性，让浏览器在DOM解析完成后再执行脚本，同时不阻塞页面渲染：

<!-- 修改后的index.html的head部分 -->
<head>
  <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="/javascript/script.js" defer></script>
  <script src="https://kit.fontawesome.com/fe76fcb7fd.js" crossorigin="anonymous" defer></script>
  <title>AccessGo | Select Service</title>
</head>

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