javascript - 我有一个范围输入来更改颜色，但它不起作用

Question

这是我的 JS 代码，我将包含我的 Git，非常感谢您的宝贵时间。 https://github.com/bohorquez866/Rest-dish

var slider = document.getElementById("myRange");
 slider.oniput = () => {
 document.body.style.background = `linear-gradient(90deg, #2b22e43 ${slider.value}%,
     #2b2e43 ${silider.value}%, #ffffff ${silider.value}.1%, #ffffff ${slider.value}100%)`
}

Answer 1

正如评论中提到的，您的代码存在一些问题:

• slider.oniput 处理程序中存在拼写错误，应该是 slider.oninput
• document.body.style.background 字符串中使用 silider 而不是 slider 的拼写错误
• 其中一种颜色 #2b22e43 的 HEX 值拼写错误，应为 #2b22e4

这是一个固定的示例:

var slider = document.getElementById("slider");

slider.oninput = () => {
  var currValue = slider.value;
  document.body.style.background = `linear-gradient(90deg, #2b22e4 ${currValue}%, #2b2e43 ${currValue}%, #ffffff ${currValue}.1%, #ffffff ${currValue}%)`;
};

<div>
  <input type="range" id="slider" name="volume" min="0" max="11" />
  <label for="slider">slider</label>
</div>

不确定这是否是您正在寻找的效果，但它确实有效。您可以随意调整它。