HTML已链接引入JS文件但代码不生效，本地运行异常问题排查

• DOM加载时序问题：这是最核心的触发原因。你将JS文件放在head标签内引入，浏览器加载到script标签时会同步阻塞执行JS代码，此时body标签还未被解析渲染，document.body 为 null，调用innerHTML属性会直接抛出异常，代码自然无法运行。在线代码片段平台通常会默认将用户提交的JS代码放在body末尾，或自动包裹DOM加载完成的监听逻辑，所以在线运行能正常生效。
• JS文件路径错误：你引入外部JS用的是相对路径../../static/js/reserve.js，如果HTML文件的部署目录层级发生变动，相对路径计算错误就会导致JS文件返回404，代码根本不会被加载执行。
• 本地资源访问限制：如果直接用file协议打开本地HTML文件，部分浏览器会限制相对路径的本地资源加载，或触发跨域规则拦截，也会导致JS加载失败。

1. 优先修复DOM加载时序问题，两种常用方案二选一即可：
   • 方案一：将JS的引入标签从head移动到body标签的末尾，放在</body>闭合标签之前，确保body解析完成后再执行JS代码
   • 方案二：把现有JS代码包裹在DOM加载完成的监听事件内，代码示例：

   // 原生JS写法
   document.addEventListener('DOMContentLoaded', function() {
       document.body.innerHTML = "<h1>Today's date is </h1>"
   })
   // 已引入jQuery的简化写法
   $(function() {
       document.body.innerHTML = "<h1>Today's date is </h1>"
   })
   

2. 检查JS文件加载状态：按F12打开浏览器开发者工具，切换到「网络」面板刷新页面，搜索reserve.js查看请求状态：
   • 如果状态码为404，调整script标签的src路径，可优先使用绝对路径避免相对路径计算误差
   • 如果是CORS跨域报错，建议使用本地静态服务（比如VSCode的Live Server插件）启动HTML文件，不要直接用file协议打开本地文件
3. 查看控制台报错信息：切换到开发者工具的「控制台」面板，刷新页面后如果有JS报错，可直接根据报错提示快速定位问题。

内容的提问来源于stack exchange，提问作者Shelef tavor