HTML中引入JS需路径正确且用绝对路径如/src="/static/js/main.js"；函数须全局声明；onclick仅支持单事件，addEventListener更灵活；缓存问题需强制刷新或禁用缓存。
HTML 中怎么用 script 标签引入 JS 文件
必须把 js 文件路径写对，且放在能被浏览器正确加载的位置。常见错误是路径写成相对路径但没考虑 html 当前所在目录层级，比如 html 在 /pages/index.html，却写了 src="js/main.js"，实际文件在 /static/js/main.js，结果控制台报 404 not found。
推荐做法：
- 用绝对路径开头，比如
src="/static/js/main.js"（以站点根目录为起点） - 确保服务器已配置静态资源路由，Node.js/Express 里要加
app.use(express.static('static')) - 开发时打开浏览器开发者工具的 Network 面板，看 JS 文件是否返回 200
怎么从 HTML 直接调用 JS 里的函数
JS 函数得先声明在全局作用域（即没被包裹在 function、if 或模块作用域里），否则 HTML 里的 onclick 或 onload 找不到它。
常见错误：用 ES6 模块语法（export/import）写 JS，又在 HTML 里直接写 onclick="myFunc()" —— 浏览器会报 myFunc is not defined。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 如果不用模块，就别加
type="module"，直接写<script src="main.js"></script> - 函数定义写在
<script></script>块里或外部 JS 文件顶部，不要嵌套 - 调用时注意执行时机：DOM 元素还没加载完就调用操作 DOM 的函数，会报
Cannot read property 'xxx' of null
onclick 和 addEventListener 哪个更靠谱
onclick 写在 HTML 标签里最简单，但只支持一个处理函数；addEventListener 支持多个监听器，也更容易解绑和控制事件流，适合稍复杂的交互。
容易踩的坑：
-
onclick="doSomething()"里不能传带引号的字符串参数，比如onclick="say('hello')"会因引号冲突解析失败，得写成onclick="say("hello")" -
addEventListener必须等 DOM 加载完再绑定，否则找不到元素，推荐放在window.addEventListener('DOMContentLoaded', ...)里 - 用
addEventListener时，函数名后面不加括号：btn.addEventListener('click', handleClick)，不是handleClick()
为什么改了 JS 但页面没反应
绝大多数时候不是代码写错了，而是浏览器缓存了旧版本 JS 文件。尤其本地开发时，HTTP 缓存策略可能让浏览器跳过重新请求。
快速验证方式：
- 刷新时按住
Shift点刷新（强制重载），或用快捷键Ctrl+Shift+R（Windows/Linux）/Cmd+Shift+R（macOS） - 在 Chrome 开发者工具 Network 面板勾选
Disable cache - 给 JS 文件 URL 加时间戳参数，比如
src="main.js?v=1.0.1"，每次改完手动更新版本号
另外注意：JS 报错会中断后续执行，哪怕只是某一行 console.log(undefined.xxx)，也可能导致后面函数根本没注册上——所以务必先看 Console 有没有红色报错。
