自定义Modal功能异常，出现Uncaught TypeError: Cannot read properties of null错误

问题描述 #

我尝试制作自定义Modal组件，但功能无法正常运行，控制台抛出错误：
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

我的JavaScript代码如下：

const modalOpenButton = document.getElementById("modal-open");
const modal = document.getElementById("modal");
const modalCloseButton = document.getElementById("modal-close");

modalOpenButton.addEventListener("click", () => {
    modal.style.display = "flex";
});
modalCloseButton.addEventListener("click", () => {
    modal.style.display = "none";
});

已解决方案 #

调整HTML文件中<script>标签的位置后，Modal功能恢复正常。

错误原因与扩展解决方法 #

出现这个错误的核心原因是JavaScript代码执行时，目标DOM元素还未被浏览器加载解析。如果<script>标签放在HTML文档的<head>里，或者放在目标DOM元素之前，document.getElementById就会找不到对应元素，返回null，此时调用addEventListener自然会抛出类型错误。

除了调整脚本位置，还有两种可靠的解决方式：

• 方式一：将脚本放在</body>标签之前
  确保所有DOM元素都已加载完成后再执行JS代码：

<body>
  <!-- 页面所有DOM元素 -->
  <button id="modal-open">打开弹窗</button>
  <div id="modal">
    <button id="modal-close">关闭弹窗</button>
    <!-- 弹窗内容 -->
  </div>

  <!-- 脚本放在body末尾 -->
  <script>
    // 你的Modal代码
  </script>
</body>

• 方式二：监听DOMContentLoaded事件
  通过事件监听确保DOM加载完成后再执行代码，这种方式不限制脚本位置：

document.addEventListener('DOMContentLoaded', () => {
  const modalOpenButton = document.getElementById("modal-open");
  const modal = document.getElementById("modal");
  const modalCloseButton = document.getElementById("modal-close");

  modalOpenButton.addEventListener("click", () => {
      modal.style.display = "flex";
  });
  modalCloseButton.addEventListener("click", () => {
      modal.style.display = "none";
    });
});

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