食谱页面点击提交时出现Cannot read properties of null (reading 'addEventListener')错误

核心错误原因 #

这个错误的本质是document.getElementById('submit')返回了null——页面上找不到id为submit的元素。常见触发场景：

• 代码执行时机过早，DOM还未完全加载，目标元素尚未生成
• HTML中提交按钮的id拼写错误，或者根本没设置id="submit"

其他代码问题及修复 #

除了核心错误，你的代码还有几处需要调整：

• 变量未用let/const声明，会意外创建全局变量，存在污染风险
• querySelectorAll语法错误：input=[name="typeofmeal"]应改为input[name="typeofmeal"]
• console.log(values)放在了点击事件回调外部，此时values还未定义，无法打印选中值

修正后的代码示例 #

// 确保DOM加载完成后再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  const submitBtn = document.getElementById('submit');
  
  // 先判断元素是否存在，避免报错
  if (submitBtn) {
    submitBtn.addEventListener('click', (event) => {
      // 若按钮在表单内，阻止默认提交行为
      event.preventDefault();
      
      // 正确获取选中的复选框
      const checkboxes = document.querySelectorAll('input[name="typeofmeal"]:checked');
      const values = [];
      checkboxes.forEach((checkbox) => {
        values.push(checkbox.value);
      });
      
      // 移到回调内部，才能拿到实时选中的值
      console.log(values);
    });
  } else {
    console.error('页面中不存在id为submit的元素，请检查HTML');
  }
});

额外注意事项 #

• 检查HTML中提交按钮的id是否正确，比如：<button id="submit">提交食谱</button>或<input type="submit" id="submit">
• 如果脚本放在<head>标签内，必须用DOMContentLoaded事件包裹；也可以直接把脚本标签放在</body>末尾，此时DOM已渲染完成

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