Javascript 在函数外部定义颜色时，为什么e.target.style.backgroundColor不更新？

这是一个蚀刻草图项目，我正在尝试做，我有两个主要的功能工作，即灰度（每个过程变得更暗）和彩虹，它在悬停时输出一个随机颜色

我想在下一步添加预设颜色，但由于某些原因，它没有更新。我已经尝试了我能想到的一切，比如将值添加到只保留当前值的数组中，设置

e.target.style.backgroundColor=className[0]哪个有效

问题是我想使用自己的颜色阴影，而不是预定义的css颜色名称（我知道我的rgb值与默认值相同，但这是暂时的）

我认为如果我在updateColor（）函数中为currentColor指定一个值，它就可以工作，但当然会失去所有的灵活性

我在函数中放置了一个console.log（），以查看它是否正在接收值，但由于某种原因，它根本没有更新

PS：我为代码混乱提前道歉

编辑：编辑成最小、完整且可验证的示例


const grid=document.querySelector（“.grid”）；
const clear=document.querySelector（“清除”）；
清除.addEventListener（“单击”，重置）；
函数createDivs（）{
对于（i=1；i<16*16+1；i++）{
让createdDivs=document.createElement（“div”）
grid.appendChild（createdDivs）
createdDivs.setAttribute（“类”、“网格元素”）
}
grid.style.gridTemplateColumns=`重复（${16}，1fr）`
grid.style.gridTemplateRows=`重复（${16}，1fr）`
}
createDivs（）；
函数重置（）{
让divs=document.queryselectoral（“.grid元素”）
divs.forEach（函数（div）{
div.parentNode.removeChild（div）；
});
createDivs（）；
}
const li=document.queryselectoral（“ul li”）
李.forEach（职能（e）{
e、 addEventListener（“单击”，获取类名）
})
让className=[“黑色”]
让oldClassName=[“黑色”]
让currentColor=“黑色”
函数fetchClassName（e）{
className.unshift（e.srcielement.className）；
oldClassName=className.pop（）；
setColor（）；
}
函数setColor（）{
设divs=document.queryselectoral（“.grid元素”）；
开关（类名称[0]）{
案例“彩虹”：
divs.forEach（函数（div）{
div.removeEventListener（“鼠标悬停”，更新颜色）；
div.addEventListener（“鼠标悬停”，skittles）；
})
打破
案例“蓝色”：
currentColor=“rbga（0,0,255,1）”
对于（y=0；y

.grid{
显示：网格；
高度：550px；
宽度：550px；
}
.网格元素{
网格区域：自动；
边框底部：1px实心rgba（0,0,0,0.1）；
左边框：1px实心rgba（0,0,0,0.1）；
}
ulli：悬停{
光标：指针；
}

透明帆布

蓝色
彩虹

有一个输入错误，您将颜色定义为
rbga
，但它应该是
rgba
：

currentColor = "rgba(0, 0, 255, 1)"

有一个输入错误，您将颜色定义为
rbga
，但它应该是
rgba
：

currentColor = "rgba(0, 0, 255, 1)"

@CollinD我已经尽我所能缩小了范围，感谢您抽出时间让您的问题更具可读性@柯林斯：我已经尽我所能缩小了范围，谢谢你花时间让你的问题更具可读性！花了2小时来解决这个问题，结果是打字错误。。。谢谢你，我会记得现在激烈地检查拼写错误，找出问题，这是一个拼写错误。。。谢谢，我现在会记得仔细检查打字错误