输入滑动条数值变更时切换图片src功能失效问题咨询

存在的问题 #

• 逻辑仅在页面初始化时执行一次，没有绑定滑动条的数值变化事件，滑动操作不会触发src更新逻辑
• 元素选择器错误：你代码里使用input.step选择器，但你的input元素没有设置step类名，无法匹配到对应滑动条元素
• 属性调用错误：input元素不存在innerHTML.src属性，直接操作DOM元素的src属性即可
• 未获取滑动条实时值：代码中使用的step变量未定义，也没有读取滑动条的当前数值，判断逻辑没有生效基础

修复后完整代码 #

HTML部分 #

<span id="valBox"></span>
<input type="range" min="1" max="3" step="1" id="rangeSlider">
<img id="demo" src="default-image.png">

JavaScript部分 #

<script>
// 获取需要操作的DOM元素
const rangeSlider = document.getElementById('rangeSlider')
const demoImg = document.getElementById('demo')
const valBox = document.getElementById('valBox')

// 绑定滑动条数值变化事件
rangeSlider.addEventListener('input', function() {
  // 获取当前滑动值，转成数字类型
  const currentVal = Number(this.value)
  // 同步显示当前数值
  valBox.textContent = currentVal
  // 切换图片src
  if (currentVal === 1) {
    demoImg.src = "one-image.png"
  } else if (currentVal === 2) {
    demoImg.src = "two-image.png"
  } else if (currentVal === 3) {
    demoImg.src = "three-image.png"
  }
})

// 可选：页面加载时自动执行一次，匹配滑动条初始值
rangeSlider.dispatchEvent(new Event('input'))
</script>

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