JavaScript静音按钮失效：TypeError: null is not an object问题求助

报错原因 #

你遇到的TypeError: null is not an object (evaluating 'video.muted')，本质是你的JavaScript代码在页面中的视频（myVideo）和按钮（myBtn）元素加载完成前就执行了，导致document.getElementById找不到对应元素，返回了null，后续访问null.muted自然就报错了。

代码片段能正常运行是因为在线编辑器通常会自动处理脚本加载顺序，确保DOM元素就绪后再执行JS，但你的网站里没有这个机制。

修复建议 #

下面是三种可靠的解决方法，选一种适合你的即可：

方法1：把JS代码移到页面末尾 #

将你的JavaScript代码放在</body>标签的前面，这样浏览器会先渲染完所有HTML元素，再执行JS：

<!-- 页面其他HTML内容 -->
  <script>
    var video = document.getElementById("myVideo");
    var btn = document.getElementById("myBtn");

    function myFunction() {
        video.muted = !video.muted;
        btn.innerHTML = video.muted ? "Unmute":'Mute';
    }
  </script>
</body>

方法2：用DOMContentLoaded事件包裹代码 #

通过监听DOMContentLoaded事件，确保只有当整个DOM结构加载完成后，才执行获取元素和绑定逻辑的代码：

document.addEventListener('DOMContentLoaded', function() {
  var video = document.getElementById("myVideo");
  var btn = document.getElementById("myBtn");

  function myFunction() {
      video.muted = !video.muted;
      btn.innerHTML = video.muted ? "Unmute":'Mute';
  }
  
  // 可选：把按钮的点击事件绑定移到这里，去掉HTML里的onclick属性
  btn.addEventListener('click', myFunction);
});

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

如果你的JS是外部文件，或者不想移动代码位置，可以给<script>标签加上defer属性，让浏览器在解析完DOM后再执行脚本：

<script src="你的脚本文件路径.js" defer></script>

额外检查项 #

如果以上方法都没用，再确认这两点：

• 网站中的视频元素ID确实是myVideo，按钮ID确实是myBtn，注意ID是大小写敏感的
• 页面中没有重复的相同ID元素，否则getElementById只会返回第一个匹配的元素

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