引入外部.js文件后JavaScript代码无法正常运行该如何解决？

问题原因 #

• 最核心的常见诱因是文件引用路径错误：你当前script标签的src="/audio.js"、link标签的href="/style.css"均以/开头，属于站点根目录绝对路径：
  • 若你是本地直接双击打开HTML文件（地址栏为file://开头），该根路径指向本地磁盘根目录，而非你的项目文件夹，浏览器无法找到对应audio.js文件，代码完全不会执行
  • 若你使用本地服务启动项目，但audio.js未存放在服务配置的根目录下，也会触发404加载失败
• 次要可能为DOM加载时序问题：虽然你把script放在了</body>结束标签之后，正常场景下DOM已经解析完成，但部分特殊加载场景下仍可能出现获取DOM元素为null的异常。

解决方法 #

1. 优先修正文件引用路径
   如果audio.js、style.css和index.html存放在同一个文件夹下，删除路径开头的/，改为同级相对路径即可：

<link rel="stylesheet" href="style.css"/>
<script src="audio.js"></script>

如果audio.js存放在项目的子文件夹内，按照实际文件层级调整路径即可，例如存放在js文件夹下就写为src="js/audio.js"。

2. （可选）为JS代码增加DOM加载完成监听，彻底避免DOM获取失败的问题，修改audio.js代码如下：

document.addEventListener('DOMContentLoaded', function() {
    var music = document.getElementById('music');
    var progressed = document.getElementById('progressed');
    var progress_bar = document.getElementById('progress_bar');

    music.ontimeupdate = function(e) {
        progressed.style.width = Math.floor(music.currentTime *100 / music.duration) + "%";
    }

    progress_bar.onclick = function(e) {
        music.currentTime = ((e.offsetX / progress_bar.offsetWidth) * music.duration);
    }
})

3. 问题排查验证：修改后可按F12打开浏览器开发者工具，切换到Console标签查看报错：如果出现404 Not Found报错则仍为路径问题，继续调整路径即可；如果出现Cannot read properties of null报错则为DOM元素获取失败，检查第二步代码是否正确添加即可。

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