我有一个Range输入以更改颜色，但是它不起作用

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的
• 错字
• 您输入的一种颜色HEX的{​​{1}}值为错字，应该为#2b22e43

这是一个固定的示例：

#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}%)`;
};

不确定这是否是您想要的效果，但是效果很好。随意调整它。

Answer 2

这是语法错误，不是slider.oniput是slider.oninput，您错过了一个N，然后在$ {}中写了silider.value。

下面的代码编辑。

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