JS运行提示document.getElementById(...)为null报错找不到原因怎么办

你遇到的TypeError: document.getElementById(...) is null错误，核心原因是JavaScript代码执行时，页面DOM元素还未完成渲染加载，浏览器还没有解析到你定义的id="contact-form"表单元素，因此调用getElementById只能返回null。

你可以任选以下任意一种方案解决问题：

• 方案1：调整JS文件引入位置
  把JS文件的引入代码放在HTML文件的</body>标签之前，也就是你现有HTML里<!-- Connect the Javascript file -->注释的下方即可，示例：

<!-- 原有HTML内容 -->
</main>

<!-- Connect the Javascript file -->
<script src="你的JS文件路径"></script>
</body>

该方案操作最简单，能保证JS执行时所有DOM元素已经渲染完成。

• 方案2：将JS逻辑包裹在DOM加载完成事件中
  如果不方便调整JS引入位置，可以把现有JS代码全部包裹在DOMContentLoaded事件回调内，修改后的JS代码如下：

const message = "Thank you for submitting your message.";

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("contact-form").addEventListener("submit", function(event) {
    event.preventDefault();
    alert(message);
  });
});

• 方案3：给script标签添加defer属性
  如果你是在head标签内引入的JS文件，给script标签添加defer属性即可让浏览器等DOM解析完成后再执行JS，示例：

<head>
  <!-- 其他head配置 -->
  <script src="你的JS文件路径" defer></script>
</head>

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