HTML音量调节函数运行异常，报读取null的value属性TypeError错误

触发报错的核心原因 #

你代码中存在元素选择逻辑错误：你传入函数的是滑块自身的id（值为3），但JS内查询的是拼接后的input-3元素，页面不存在该id的节点，导致sound变量为null，访问null.value就会抛出你遇到的类型错误。

其余待修正的逻辑问题 #

• 直接用volume_show.innerHTML属于依赖浏览器隐式将DOM id注册为全局变量的特性，兼容性差，需要主动通过DOM API获取该显示节点
• 你选中的sound是滑块输入框，本身没有volume属性，需要额外选中你要控制的音频/视频元素设置音量
• HTML5媒体元素的volume属性取值范围是0~1，滑块返回值是0~100，需要做数值转换
• 用oninput代替onchange可以实现拖动滑块实时生效，无需松开鼠标才触发更新

修正后代码 #

JS代码 #

// 先获取你要控制的音频元素，示例中假设你的audio标签id为audio-player
const audioPlayer = document.getElementById('audio-player');
const volumeShow = document.getElementById('volume_show');

function volume_change(id) {
  // 直接查询传入的滑块id，不需要拼接前缀
  const rangeInput = document.getElementById(id);
  // 更新显示的音量数值
  volumeShow.innerHTML = rangeInput.value;
  // 转换为0~1的取值后给音频元素设置音量
  audioPlayer.volume = rangeInput.value / 100;
}

如果你的滑块id需要和音频id做关联，也可以把滑块id命名为input-3，对应音频id为audio-3，按需调整匹配逻辑即可。

HTML代码（可选优化） #

<div class="volume">
  <p id="volume_show">
    50
  </p>
  <i class="fa fa-volume-up" aria-hidden="true" onclick="mute_sound()" id="volume_icon"></i>
  <!-- 把onchange改为oninput实现实时更新 -->
  <input type="range" min="0" max="100" value="50" oninput="volume_change(this.id)" id="3">
</div>
<!-- 不要忘了添加你的音频元素，示例： -->
<audio id="audio-player" src="你的音频地址"></audio>

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