HTML表单关联Javascript代码无法运行求助

新手写表单+JS时，最容易踩这几个坑，对照你的代码排查就行：

1. 表单默认提交行为没阻止 #

表单点提交后会自动刷新页面，JS代码刚要执行就被页面刷新打断了，自然看不到提示。必须先阻止默认行为：

<form id="myForm">
  <!-- 你的表单输入项 -->
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
  // 先拦住默认的页面跳转
  e.preventDefault();
  // 再显示提示
  alert('Submission Successful');
  // 如果确实需要提交表单数据，加下面这行手动触发提交
  // this.submit();
});
</script>

2. JS代码跑早了，找不到表单元素 #

如果你的JS写在<head>里，或者写在表单代码前面，页面还没加载完表单，JS就已经执行了，自然找不到要绑定事件的元素。

解决办法二选一：

• 把JS代码挪到</body>标签的前面（页面最后位置）
• 用DOM加载完成事件包裹代码：

document.addEventListener('DOMContentLoaded', function() {
  // 这里写表单的事件监听代码
});

3. 事件绑定写错了 #

检查这几点：

• 按钮的type是不是submit？如果是普通按钮（type="button"），要绑定click事件而不是submit
• 有没有拼错函数名？比如把addEventListener写成addEventListner，或者事件名写成submint
• 表单的ID是不是和JS里调用的一致？比如表单ID是userForm，JS里却写了getElementById('myForm')

4. 看浏览器控制台找报错 #

按F12打开浏览器控制台，切换到「Console」标签，看有没有红色的报错信息。比如显示Cannot read properties of null (reading 'addEventListener')，就是JS找不到你指定的表单元素，要么是DOM没加载完，要么是ID写错了。

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