如何从addEventListener返回值？滑块控制div颜色失效求助

问题原因 #

1. 背景色未更新：设置changebg.style.backgroundColor的代码仅在页面初始化时执行一次，滑块滑动时未重新触发赋值，因此颜色不会变化。
2. 滑块卡住：尝试redslider.value = red时，red初始为空字符串，会将滑块值重置为空，导致滑块失去有效数值，无法继续滑动。

修复后的代码 #

JavaScript #

var redslider = document.getElementById('r')
var greenslider = document.getElementById('g')
var blueslider = document.getElementById('b')

const changebg = document.getElementById('rangeValue')

// 初始化变量为滑块的初始值，而非空字符串
var red = redslider.value
var green = greenslider.value
var blue = blueslider.value

// 封装更新背景色的函数，避免重复代码
function updateBackgroundColor() {
  changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
}

// 页面加载时先设置一次初始背景色
updateBackgroundColor()

redslider.addEventListener('input', (e) => {
  red = redslider.value
  console.log(`the value of red is ${red}`)
  updateBackgroundColor()
})
greenslider.addEventListener('input', (e) => {
  green = greenslider.value
  console.log(`the value of green is ${green}`)
  updateBackgroundColor()
})
blueslider.addEventListener('input', (e) => {
  blue = blueslider.value
  console.log(`the value of blue is ${blue}`)
  updateBackgroundColor()
})

CSS（无需修改） #

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.maincontainer {
  width: 50%;
  height: 50%;
  border-radius: 20px;
  background: hsla(22, 100%, 78%, 1);
  background: linear-gradient(90deg, hsla(22, 100%, 78%, 1) 0%, hsla(19, 95%, 76%, 1) 13%, hsla(17, 94%, 75%, 1) 32%, hsla(2, 78%, 62%, 1) 100%);
  background: -moz-linear-gradient(90deg, hsla(22, 100%, 78%, 1) 0%, hsla(19, 95%, 76%, 1) 13%, hsla(17, 94%, 75%, 1) 32%, hsla(2, 78%, 62%, 1) 100%);
  background: -webkit-linear-gradient(90deg, hsla(22, 100%, 78%, 1) 0%, hsla(19, 95%, 76%, 1) 13%, hsla(17, 94%, 75%, 1) 32%, hsla(2, 78%, 62%, 1) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

.slider {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  width: 70%;
  height: 50px;
  background: white;
}

.slider input {
  width: 90%;
}

.valuee {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 40px;
  left: 50px;
  border: 2px solid black;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

HTML（无需修改） #

<div class="maincontainer">
  <div class="slider">
    <input type="range" min="0" max="255" value="50" id="r">
  </div>
  <div class="slider">
    <input type="range" min="0" max="255" value="50" id="g">
  </div>
  <div class="slider">
    <input type="range" min="0" max="255" value="50" id="b">
  </div>
  <div class="valuee" id="rangeValue">100</div>
</div>

关键改进点 #

• 将red、green、blue初始化为滑块默认值（50），避免空字符串引发的异常
• 封装updateBackgroundColor函数，每次滑块值变化时调用该函数更新背景色
• 移除错误的反向赋值操作（如redslider.value = red），滑块值由用户交互控制，无需手动覆盖

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