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

Question

这是我正在尝试做的一个 eclipse 刻草图元素，我得到了两个主要功能，即灰度(每次通过都会变暗)和彩虹，它在悬停时输出随机颜色

接下来我想添加预设颜色，但由于某种原因它没有更新。我已经尝试了所有我能想到的方法，例如将值添加到仅保留当前值的数组，以及设置有效的 e.target.style.backgroundColor = className[0];。

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

我认为如果我在 updateColor() 函数内为 currentColor 赋值，它可以工作，但当然会失去所有的灵 active 。

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

PS:代码乱七八糟提前致歉

编辑:编辑成一个最小的、完整的、可验证的例子

const grid = document.querySelector(".grid");
const clear = document.querySelector("#clear");
clear.addEventListener("click", reset);
function createDivs(){
    for(i = 1; i < 16 * 16 + 1; i++){
        let createdDivs = document.createElement("div")
        grid.appendChild(createdDivs)
        createdDivs.setAttribute("class", "grid-element" )
    }
    grid.style.gridTemplateColumns = `repeat(${16}, 1fr)`
    grid.style.gridTemplateRows = `repeat(${16}, 1fr)`
}
createDivs();
function reset(){
    let divs = document.querySelectorAll(".grid-element")
    divs.forEach(function(div){
        div.parentNode.removeChild(div);
    });
    createDivs();
}

const li = document.querySelectorAll("ul li")
li.forEach(function(e){
    e.addEventListener("click", fetchClassName)  
})
let className = ["black"]
let oldClassName = ["black"]
let currentColor = "black"
function fetchClassName(e){
    className.unshift(e.srcElement.className);
    oldClassName = className.pop();
    setColor();
}
function setColor(){
    let divs = document.querySelectorAll(".grid-element");
    switch(className[0]){
        case "rainbow":
            divs.forEach(function(div){
                div.removeEventListener("mouseover", updateColor);
                div.addEventListener("mouseover", skittles);
            })
            break;
        case "blue":
            currentColor = "rbga(0, 0, 255, 1)"
            for (y = 0; y < divs.length; y++){
                let div = divs[y];
                div.removeEventListener("mouseover", skittles);
                div.addEventListener("mouseover", updateColor);
            }
            break;
    }
}
function updateColor(e){
        e.target.style.backgroundColor = currentColor //className[0] works but not what I want
        console.log(currentColor)
}
function skittles(e){
        let r = Math.floor(Math.random() * 256);
        let g = Math.floor(Math.random() * 256);
        let b = Math.floor(Math.random() * 256);
        let rgb = `rgba(${r}, ${g}, ${b}, 0.5)`
        e.target.style.backgroundColor = rgb;
}

.grid {
  display: grid;
  height: 550px;
  width: 550px;
}
.grid-element {
  grid-area: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
ul li:hover {
  cursor: pointer;
}

<div class="container">
    <div class="grid"></div>
</div>
<div>
    <button type="button" id="clear">Clear Canvas</button>
        <ul>
            <li class="blue">blue</li>
            <li class="rainbow">rainbow</li>
        </ul>
 </div>

Answer 1

有一个打字错误，您将颜色定义为 rbga 但它应该是 rgba:

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

https://jsfiddle.net/y83qou9r/