推荐将HTML结构与JS逻辑分离：index.html仅保留结构和挂载点，main.js单独编写并用script标签引入；务必通过Live Server启动，确保DOM加载完成后再绑定事件，优先使用addEventListener而非内联onclick。
VS Code 里写 HTML5 + JS 交互，文件怎么组织才不踩坑
直接放一起写（ 写在 底部）最省事，适合单页小功能；但一旦 JS 逻辑变多，立刻难调试、难复用、难维护。VS Code 本身不干预结构，但你得自己守住边界。
推荐做法：
-
index.html只负责结构和挂载点，比如 -
main.js单独建文件，用引入 - 在 VS Code 中右键「Open with Live Server」启动本地服务，避免
file://协议下 JS 读取失败 - 别用「直接双击打开 HTML」——这时
fetch、import、甚至部分localStorage行为都会被浏览器策略拦掉
按钮点击事件绑定：用 addEventListener 别碰 onclick 属性
写死 onclick="handleClick()" 看似快，但会污染 HTML、无法传参、不好解绑、跟现代 JS 模块化思路冲突。VS Code 里写 addEventListener 是唯一靠谱路径。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 确保 DOM 加载完再绑定，用
document.addEventListener('DOMContentLoaded', ...)或把放前 - 获取按钮用
document.getElementById('submit-btn')或更灵活的document.querySelector('#submit-btn') - 绑定时别漏掉引号：
btn.addEventListener('click', handleClick)—— 这里是函数名，不是handleClick() - 如果按钮是动态插入的（比如 AJAX 后追加），要用事件委托：
document.body.addEventListener('click', e => { if (e.target.id === 'submit-btn') {...} })
VS Code 调试按钮点击：断点打在哪、控制台怎么看
光写对没用，得确认它真执行了。VS Code 自带调试器能直接跑 HTML+JS，但前提是你开了 Live Server 且用浏览器打开（不是 file 协议）。
关键操作：
- 在
main.js的事件回调第一行打个断点（VS Code 左侧边栏点一下），然后点按钮，看是否停住 - 如果断点灰了、不生效，大概率是 JS 文件没加载成功——检查浏览器开发者工具「Network」标签里
main.js状态是不是 200 - 控制台报
Uncaught ReferenceError: handleClick is not defined？说明函数没声明或声明位置错了（比如写在DOMContentLoaded外面但又没提升） - 想快速验证绑定是否成功，可以在控制台手动输
document.getElementById('submit-btn').onclick，返回null才是对的（说明没用内联 onclick）
常见错误：点击没反应，90% 出在这三个地方
不是代码写错，而是环境或时机问题。VS Code 不报错，但浏览器静默失败。
- HTML 文件保存了，但浏览器没刷新——Live Server 默认自动刷新，但如果关了或用了其他方式打开，就得手动 F5
- JS 里写了
document.getElementById('xxx')，但对应 ID 在 HTML 里拼错了，或者大小写不对（submitBtn≠submit-btn） - 按钮有 CSS 设置了
pointer-events: none，或者被遮挡层盖住了，点击实际没落到按钮上——用浏览器「Elements」面板勾选「:hover」看看鼠标悬停时高亮的是不是目标元素
复杂点在于：这些错误不会抛异常，控制台干干净净，但按钮就是点不动。得挨个排除，而不是盯着 JS 逻辑反复改。
