Django项目集成tourguide.js时JS不执行 启动按钮无响应

按优先级从高到低排查以下问题即可解决：

1. 修复静态资源加载顺序与位置错误 #

这是90%同类问题的根因：

• 你当前将自定义script.js放在head区域靠前位置，加载顺序早于jQuery、tourguide.min.js等依赖资源，浏览器执行自定义脚本时，Tourguide构造函数还未定义，会直接抛出JS错误中断所有后续逻辑
• JS资源必须严格按依赖层级从先到后引入，正确顺序为：
  • jquery-3.3.1.slim.min.js
  • popper.min.js
  • bootstrap.min.js
  • tourguide.min.js
  • 自定义业务脚本js/script.js
• 建议将所有JS标签统一移到</body>闭合标签之前，不需要额外套window.onload就能保证DOM渲染完成后再执行绑定逻辑。如果坚持把脚本放在head中，必须给每个script标签加defer属性，保证执行顺序且等DOM就绪后再运行。
• 注意：不要依赖window.onload绑定初始化逻辑，页面内多个脚本同时绑定window.onload时，后绑定的逻辑会覆盖之前的逻辑，很容易导致你的初始化代码完全不执行。

2. 定位阻断执行的JS报错 #

打开浏览器开发者工具（按F12唤起），切换到Console面板刷新页面，根据红色报错信息对应修复：

• 报Tourguide is not defined：要么是依赖顺序错误，要么是tourguide.min.js加载失败，切换到Network面板查看该资源的请求状态，非200状态码的话将资源存到本地static目录引用即可，不要用失效的CDN地址
• 报Cannot read properties of null (reading 'addEventListener')/Cannot set property 'onclick' of null：说明绑定点击事件时，id为tourbutton的按钮节点还未渲染，按上一步的要求把脚本移到body末尾即可解决
• 报tourguide配置相关错误：检查实例化代码，仅靠data-tour属性配置引导步骤时，不需要额外传入steps参数，基础实例化代码参考：

// 脚本放在body末尾时不需要套任何加载完成事件
const tourguide = new Tourguide();
document.querySelector('#tourbutton').addEventListener('click', () => {
  tourguide.start();
})

3. 检查节点属性配置正确性 #

• 确认启动按钮的id准确为tourbutton，无拼写错误、大小写偏差、多余空格，getElementById/querySelector对id匹配是大小写敏感的
• 所有引导节点的data-tour属性值要从1开始连续编号，不要跳号、不要重复编号，5步引导对应data-tour="1"到data-tour="5"，否则tourguide初始化时会因找不到完整步骤静默失败
• 切换到Network面板确认tourguide.css加载状态为200，样式加载失败时引导层就算启动也会因显示异常被误以为没有触发。

4. 快速定位问题边界 #

调整完配置后刷新页面，直接在浏览器Console面板手动执行tourguide.start()：

• 如果能正常弹出引导流程，说明Tourguide实例本身初始化正常，问题仅出在按钮点击事件的绑定环节，回头检查按钮id、事件绑定时机即可
• 如果手动执行也无法启动，根据Console抛出的报错对应修复资源加载或配置问题即可。

内容的提问来源于stack exchange，提问作者Chuen Yik Kang