表单事件处理报错主因是DOM未找到、执行过早或未阻止默认行为；需检查ID拼写、将脚本移至body底部或监听DOMContentLoaded、提交时调用e.preventDefault()，并按元素类型正确取值。
表单事件处理报错，八成不是逻辑写错了，而是 DOM 没找对、时机没踩准、行为没拦住。下面几个关键点，覆盖绝大多数真实场景。
ID 不匹配：最常见也最容易忽略
JavaScript 用 document.getElementById("xxx") 查元素，但 HTML 里压根没有 id="xxx" 的标签——结果就是返回 null，再调 .onclick 或 .addEventListener 就直接报 TypeError: Cannot set property 'onclick' of null。
- 检查按钮、输入框等元素的 id 属性是否拼写一致，注意大小写、空格、连字符（ID 里不能有空格）
- 别把按钮文字当 ID 用，比如
<button>Pay Now</button>并不等于 id="Pay Now" - 推荐用语义化 ID，如
submit-btn、email-input，避免myButton这类模糊命名
脚本执行太早：DOM 还没加载完就动手
如果 <script> 放在 <head> 里，或没做任何等待，JS 就会尝试操作还没生成的表单元素，导致 getElementById 返回 null。
- 把 script 标签移到 <body> 底部，是最简单有效的做法
- 更稳妥的方式是监听 DOMContentLoaded：
window.addEventListener('DOMContentLoaded', () => { /* 绑定事件 */ }); - 不用 window.onload，它要等图片、样式表全部加载完，太晚
没阻止默认行为：表单一提交就刷新页面
点击 type="submit" 按钮，默认会触发表单提交并刷新页面。即使你的验证逻辑跑通了，成功提示也可能一闪而过，让人误以为 JS 没执行。
- 在事件处理函数开头加 e.preventDefault()
- 绑定事件时优先用 form.addEventListener('submit', handler)，而不是给按钮加 onclick
- 确保 handler 函数接收 event 参数，不然 preventDefault 会报错
元素类型搞混：checkbox、radio、select 取值方式不同
对复选框（checkbox）读 .value 得到的是固定字符串，实际要用 .checked；对单选组（radio）要遍历判断哪个被选中；对下拉框（select）要取 .value 或 selectedOptions[0].value。
- checkbox：
document.getElementById('agree').checked - radio 组：
document.querySelector('input[name="payment"]:checked')?.value - select：
document.getElementById('country').value - 多选 select：
Array.from(select.selectedOptions).map(opt => opt.value)
