Javascript 背景相对于滑块未正确更改

因此，我正在通过一门课程实践一个项目。其中一个项目是基于彩色托盘的，该网站生成随机托盘，并提供附加功能，用户可以更改色调、亮度和饱和度 我在中途的某个地方，但我的滑块不能按预期工作。 如果我改变色调，背景就不会随之改变，它会一直围绕着一些灰色的颜色旋转，不知何故，所有颜色的饱和度都会停留在一开始。 我检查了色调的比例是否正确。 我尝试将console.log检查到数组中，以检查是否每个初始颜色都被正确地推送，但这似乎是正确的

请帮忙 提前谢谢

这是密码

//全局选择和变量
const colorDivs=document.queryselectoral（“.color”）；
const generateBtn=document.querySelector（“.generate”）；
常量滑块=document.querySelectorAll（'input[type=“range”]”）；
const currentHexes=document.querySelectorAll（“.color h2”）；
让我们来初始化颜色；
//事件侦听器
滑块。forEach（（滑块）=>{
slider.addEventListener（“输入”，HSL控制）；
});
colorDivs.forEach（（div，index）=>{
div.addEventListener（“更改”，（）=>{
更新上下文（索引）；
});
});
//功能
//颜色发生器
函数generateHex（）{
常量hexColor=色度随机（）；
返回六边形颜色；
}
功能检查文本对比度（颜色、文本）{
常量亮度=色度（颜色）。亮度（）；
如果（亮度>0.5）{
text.style.color=“黑色”；
}否则{
text.style.color=“白色”；
}
}
函数randomColor（）{
初始颜色=[]；
colorDivs.forEach（（div，index）=>{
const hexText=div.children[0]；
const randomColor=generateHex（）；
initialColors.push（色度（randomColor.hex（））；
//将颜色添加到背景中
div.style.backgroundColor=随机颜色；
hexText.innerText=随机颜色；
checkTextContrast（随机颜色、十六进制文本）；
//初始化着色滑块
常量颜色=色度（随机颜色）；
常量滑块=div.queryselectoral（“.sliders input”）；
常量色调=滑块[0]；
常量亮度=滑块[1]；
常数饱和=滑块[2]；
颜色滑块（颜色、色调、亮度、饱和度）；
});
重置输入（）；
}
随机颜色（）；
函数颜色滑块（颜色、色调、亮度、饱和度）{
//标度饱和
const noSat=color.set（“hsl.s”，0）；
const fullSat=颜色设置（“hsl.s”，1）；
常量刻度SAT=色度刻度（[noSat，颜色，fullSat]）；
//刻度亮度
const midBright=color.set（“hsl.l”，0.5）；
const scaleBright=色度刻度（[“黑色”，中亮，白色]）；
//更新输入颜色
saturation.style.backgroundImage=`线性渐变（向右，${scaleSat(
0
)}，${scaleSat（1）}`；
brightness.style.backgroundImage=`线性渐变（向右，${scaleBright(
0
)}，${scaleBright（0.5）}，${scaleBright（1）}`；
hue.style.backgroundImage=`线性渐变（向右，rgb（204,75,75），rgb（204204,75），rgb（75204,75），rgb（75204204），rgb（75,75204），rgb（204,75204），rgb（204,75,75））；
}
功能HSL控制（e）{
常数指数=
e、 target.getAttribute（“数据亮度”）||
e、 target.getAttribute（“数据sat”）||
e、 target.getAttribute（“数据色调”）；
让滑块=e.target.parentElement.querySelectorAll（'input[type=“range”]”）；
常量色调=滑块[0]；
常量亮度=滑块[1]；
常数饱和=滑块[2]；
const bgColor=初始颜色[索引]；
console.log（bgColor）；
让色=色度（bgColor）
.set（“hsl.s”，饱和值）
.set（“hsl.l”，亮度值）
.set（“hsl.h”，色调值）；
colorDivs[index].style.backgroundColor=color；
}
函数updateTextUI（索引）{
const activeDiv=colorDivs[index]；
常量颜色=色度（activeDiv.style.backgroundColor）；
const textHex=activeDiv.querySelector（“h2”）；
const icons=activeDiv.querySelectorAll（“.controls按钮”）；
textHex.innerText=color.hex（）；
//检查对比度
检查文本对比度（颜色、文本十六进制）；
用于（图标中的图标）{
选中文本对比度（颜色、图标）；
}
}
函数resetInputs（）{
常量滑块=document.querySelectorAll（“.sliders input”）；
滑块。forEach（（滑块）=>{
如果（slider.name==“色调”）{
const hueColor=initialColors[slider.getAttribute（“数据色调”）；
const hueValue=色度（hueColor）.hsl（）[0]；
slider.value=Math.floor（hueValue）；
}
如果（slider.name==“亮度”）{
const brightColor=initialColors[slider.getAttribute（“数据亮度”）；
常量brightValue=色度（brightColor）.hsl（）[2]；
slider.value=数学地板（brightValue*100）/100；
}
如果（slider.name==“饱和度”）{
const satColor=initialColors[slider.getAttribute（“数据sat”）；
常量satValue=色度（satColor）.hsl（）[1]；
slider.value=（数学地板（satValue）*100）/100；
}
});
}

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
字体系列：“Mulish”，无衬线；
颜色：rgb（51,51,51）；
}
钮扣{
字体系列：“Mulish”，无衬线；
}
路径
我
svg{
指针事件：无；
}
.颜色{
最小高度：80vh；
显示器：flex；
最大宽度：100vw；
颜色：rgb（212、212、212）；
}
.颜色{
最小高度：80vh；
显示器：flex；
弹性：1；
弯曲方向：立柱；
对齐项目：居中；
对正内容：空间均匀；
位置：相对位置；
溢出：隐藏；
}
.颜色h2{
字号：2rem；
光标：指针；
}
.滑块{
显示器：flex；
弯曲方向：立柱；
位置：绝对位置；
底部：0%；
背景：rgb（255、255、255）；
填充：1rem；
宽度：80%；
/*不透明度：0*/
/*指针事件：无*/
/*我们正在增加调整班*/
/*变换：translateY（100px）*/
过渡：所有0.5s缓进缓出；
}
.sliders.active{
不透明度：1；
变换：translateY（0px）；
指针事件：全部；
}
.滑块按钮{
位置：绝对位置；
排名：0；
右：0；
填充：0.5雷姆；
边框左上半径：1rem；
边框右下半径：1rem；
边界：无；
背景：rgb（75，75，