音量滑块在外部JS文件中失效，仅在HTML内联<script>标签中正常工作的问题求助

我来帮你搞定这个音量滑块的问题！你猜的没错，核心原因就是DOM加载顺序的问题——当你的JavaScript代码在HTML头部或者外部文件中提前加载时，页面上的volume-slider元素还没被浏览器渲染出来，导致JS找不到这个元素，自然无法绑定事件监听，滑块也就失效了。

为什么原来的内联底部代码有效？ #

当你把JS代码放在</body>标签前的内联<script>里时，浏览器已经完成了整个页面DOM的渲染，这时候document.getElementById('volume-slider')能准确找到对应的滑块元素，事件监听和逻辑就能正常工作。

具体解决方案 #

下面给你三种可行的解决办法，任选其一即可：

方法1：用DOMContentLoaded包裹外部JS代码

把script.js里的代码全部包裹在DOMContentLoaded事件回调中，确保代码只在DOM完全加载后执行：

document.addEventListener('DOMContentLoaded', function() {
  var audio = new Audio("audio.mp3");
  audio.volume = 0.5;
  audio.loop = true;

  document.onclick = function() { audio.play(); }

  let volume = document.getElementById('volume-slider');
  volume.addEventListener("change", function(e) { 
    audio.volume = e.currentTarget.value / 100; 
  });

  $(function() { $('[data-toggle="tooltip"]').tooltip() });
});

方法2：把外部script标签移到HTML底部

保持script.js的代码不变，把HTML头部的<script src="script.js"></script>移到</body>标签的上方，也就是原来内联JS的位置：

<!-- 其他HTML内容 -->
<script src="script.js"></script>
</body>
</html>

方法3：给外部script标签添加defer属性

如果想保留script标签在头部，可以添加defer属性，让浏览器在解析完DOM后再执行脚本：

<script src="script.js" defer></script>

验证效果 #

不管用哪种方法，修改后刷新页面，音量滑块应该就能正常控制音频音量了，同时点击页面也能正常播放音频。

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