根本原因是脚本执行时DOM未就绪导致getElementById()返回null，进而报错；应将script移至/body前、用DOMContentLoaded监听、检查ID拼写、排查CSS拦截、正确使用button标签、采用事件委托、注意移动端手势要求及同步执行敏感API。
点击按钮报 Cannot set property 'onclick' of null
根本原因是脚本执行时 DOM 还没就绪，document.getElementById() 返回 null，再链式调用 onclick 就崩了。这不是语法错，是时序错。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
<script>标签移到</body>前——最简单、最可靠 - 或者用
document.addEventListener('DOMContentLoaded', () => { ... })包裹初始化逻辑 - 别把脚本放
<head>里又不加defer，等于“图纸没画完就开工” - 检查 ID 拼写是否一致：
id="save-btn"和getElementById('save_btn')是两回事，短横线 ≠ 下划线
按钮绑了事件却点不动，控制台也没报错
常见于 CSS 或语义层面的隐形拦截：不是 JS 没生效，而是点击根本没落到按钮上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否设置了
pointer-events: none，它会透传点击，按钮收不到 - 用
outline: 1px solid red临时加边框，确认按钮是否被其他元素用z-index盖住 - 必须用
<button type="button">，别用<div onclick="...">—— 后者不支持空格键触发、无法聚焦、屏幕阅读器不可读 - 如果用了
<a>标签模拟按钮，得手动补role="button"和tabindex="0"，否则键盘用户完全无法操作
动态插入的按钮点击无效
不是事件没绑，是绑定动作发生时按钮还不存在。querySelector 找不到，addEventListener 实际绑在了 null 上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用事件委托：监听一个稳定存在的父容器（比如
id="form-container"），再用e.target.matches('button[data-action="submit"]')判断来源 - 避免委托根节点设为
document或document.body—— 太宽泛，易误触发，也影响性能 - 若父容器本身会被整块替换（如 React/Vue 组件重渲染），委托目标得选更外层的稳定节点，例如
id="app" - 不要在 AJAX 回调里对新节点逐个绑事件，那容易漏、难维护、还可能内存泄漏
移动端点按钮没反应，桌面端正常
本质是移动端浏览器策略更严：对自动播放、全屏、下载等敏感操作，要求更明确的用户手势上下文，且对 DOM 可见性、preload 状态更敏感。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保
<video>有preload="metadata"，否则paused属性可能始终为true，状态判断失效 - 关掉原生
controls属性调试——某些安卓/iOS 浏览器开启后会接管播放逻辑，你的 JS 按钮直接被忽略 - 全屏按钮调用
requestFullscreen()必须在真实 click 回调里同步执行，不能包在setTimeout、fetch().then或组件生命周期钩子里 - 导出 Excel 类操作，必须严格位于 click 回调的同步链中；任何异步延迟（哪怕
Promise.resolve().then()）都会触发下载拦截
null 报错，再用 outline 标出按钮位置，最后确认事件是否真的触发到了目标元素——别急着改逻辑，先验证“点下去”这一步到底发生了没有。 
