HTML表单提交报错：Uncaught TypeError无法读取null的addEventListener属性

报错根源 #

你遇到的Cannot read properties of null (reading 'addEventListener')错误，本质是JS代码在目标DOM元素加载完成前就执行了——此时document.getElementById("recommendationForm")返回null，自然无法调用addEventListener方法。

三种解决办法 #

1. 调整JS脚本位置

把你的script.js引用放在HTML的</body>闭合标签之前，确保浏览器先解析完所有DOM元素，再执行JS代码：

<body>
  <!-- 你的表单HTML -->
  <form action="" id="recommendationForm" class="recommendationSubmission">
    <input type="text" id="name" name="name" placeholder="Name" autocapitalize="on"/>
    <textarea type="text" id="recommendation" placeholder="Recommendation" rows="5" cols="45" autocapitalize="on" wrap="hard"></textarea>
    <button type="submit" id="button">Submit</button>
  </form>

  <!-- JS脚本放在这里 -->
  <script src="script.js"></script>
</body>

2. 使用DOMContentLoaded事件包裹代码

让JS代码等待DOM完全加载后再执行，修改你的JS文件：

document.addEventListener('DOMContentLoaded', function() {
  let recommendationForm = document.getElementById("recommendationForm");

  recommendationForm.addEventListener("submit", (e) => {
      e.preventDefault();

      let name = document.getElementById("name");
      let recommendation = document.getElementById("recommendation");

      // 优化判断：用trim()过滤空格输入
      if (name.value.trim() === "" || recommendation.value.trim() === "") {
          alert("请填写所有字段！");
      } else {
          alert("推荐提交成功！");
          console.log(`${name.value} 提交了他们的推荐`);
      }

      name.value = "";
      recommendation.value = "";
  });
});

3. 给script标签添加defer属性

在HTML的<head>中引用脚本时，加上defer属性，脚本会在DOM加载完成后执行，且不阻塞HTML解析：

<head>
  <script src="script.js" defer></script>
</head>

额外优化建议 #

判断输入是否为空时，建议用trim()方法过滤掉用户输入的纯空格字符，避免空输入绕过校验。

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