document.getElementById() 返回 null 是因 ID 缺失或拼写错误；onclick="closePopup" 需加括号调用；事件冒泡需 e.stopPropagation() 阻断；form 内按钮须设 type="button" 或 preventDefault()。
document.getElementById() 找不到元素，返回 null
这是最常踩的坑：你写了 document.getElementById("popup")，但 HTML 里只有 class="popup"，没有 id="popup"。函数直接返回 null，后面调用 .style.display = "none" 就会报错 Cannot set property 'display' of null，整个脚本卡住。
检查方法很简单：打开浏览器开发者工具（F12），在控制台输入 document.getElementById("popup")，如果返回 null，就说明 ID 缺失或拼写错误。
- 确保目标元素有且仅有一个
id属性，比如：<div id="popup">...</div> - 不要混用
id和class：用getElementById就必须配id；要用class，改用document.querySelector(".popup")或document.getElementsByClassName("popup")[0] - 确认 DOM 加载完成后再执行 JS —— 把代码放在
</body>前，或包在DOMContentLoaded事件里
onclick="closePopup" 不执行，漏了括号
onclick="closePopup" 只是把函数引用传进去，不会自动调用；必须写成 onclick="closePopup()" 才能真正触发。
更推荐用 JS 绑定方式，避免内联写法容易出错：
立即学习“前端免费学习笔记（深入）”；
- 给按钮加个唯一
id，比如id="close-btn" - 在 JS 中写：
document.getElementById("close-btn").onclick = closePopup;（注意这里不加括号，因为是赋值函数引用） - 或者用现代写法：
document.getElementById("close-btn").addEventListener("click", closePopup);
按钮在模态框内部，点击后又弹回来
这种情况多见于图片预览弹窗：关闭按钮 <span>×</span> 放在 .popup-image 里，而整个弹窗容器又被父级 .imageContainer div 的 onclick 监听覆盖。点击 × 后先执行关闭，事件再冒泡上去，触发父级的“显示弹窗”逻辑，结果一闪又回来了。
核心解法是阻断冒泡：
- 在关闭函数里加
e.stopPropagation() - 完整写法示例：
document.querySelector(".popup-image span").onclick = (e) => { e.stopPropagation(); document.querySelector(".popup-image").style.display = "none"; }; - 同时检查有没有多个同名选择器匹配到错误元素 ——
querySelector只取第一个，querySelectorAll返回 NodeList，得用[0]或遍历
按钮在 form 内部，点一下页面刷新了
如果关闭按钮嵌在 <form> 里，又没设 type="button"，浏览器默认把它当 submit 按钮处理。JS 函数可能跑完了，但表单立刻提交、页面刷新，类名改了也看不见，DOM 状态全丢。
修复只需一行属性：
- 把
<button>ACCEPT</button>改成<button type="button">ACCEPT</button> - 或者在 JS 里加
e.preventDefault()（前提是用addEventListener绑定） - 别依赖 CSS 类控制显隐 —— 如果 JS 因上述任一问题没跑完，靠
.hidden类切换也会失效
