Javascript 使用eventListener更改布尔值

我正在尝试创建一个蚀刻草图项目。我有一个函数，如果“black variable”为真，它会将正方形涂成黑色。此外，我还有另一个功能（它是点击效果功能上的一个按钮），它能够将“黑色变量”转换为假，并用随机生成的颜色绘制正方形。然而，我不能创建一个按钮，将“黑色变量”转换为真。即使tileRainbow函数工作，BlackButton函数也不工作。只有最后一个函数不起作用

我试着改变函数，改变函数的顺序

const tiles = document.getElementsByClassName("newDiv")
let black = true
//paint squares black on mouseover effect if black is true
function tileBlack() {
    if (black == true) {
        for (tile of tiles) {
            tile.addEventListener("mouseover", function (event) {
                event.target.style.backgroundColor = "black";
            })
        }
    }
}
//make rainbow button capable of changing black variable to false. if it is false paint squares with random generated colours.
function rainbowTile() {
    black = false;
    const rainbow = document.querySelector("#rainbow")
    rainbow.addEventListener('click', event => {
        if (black !== true) {
            for (tile of tiles) {

                let randomnum = Math.floor(Math.random() * 255)
                let randomnum2 = Math.floor(Math.random() * 255)
                let randomnum3 = Math.floor(Math.random() * 255)
                tile.addEventListener("mouseover", function (event) {
                    event.target.style.backgroundColor = `rgb(${randomnum}, ${randomnum2}, ${randomnum3})`;
                })
            }
        }
    })
}

//make black button capable of changing black variable to true so tileBlack function activates.
function blackButton() {
    const paintitblack = document.querySelector("#black")
    paintitblack.addEventListener('click', event => {
        black = true;
    })
}

---

我在控制台上没有得到任何错误。但是，我的代码不起作用。

调用

addEventListener（）

时不应该测试变量。如果同时调用

tileBlack（）

和

rainbowTile（）

，则两个磁贴都有事件侦听器

相反，您应该只添加一个事件侦听器一次，并且它应该在变量运行时检查该变量

Array.from（tiles）.forEach（tile=>tile.addEventListener（“mouseover”，事件=>{
if（黑色）{
event.target.style.backgroundColor=“黑色”；
}否则{
让randomnum=Math.floor（Math.random（）*255）
让randomnum2=Math.floor（Math.random（）*255）
让randomnum3=Math.floor（Math.random（）*255）
tile.addEventListener（“鼠标悬停”，函数（事件）{
event.target.style.backgroundColor=`rgb（${randomnum}，${randomnum2}，${randomnum3}）`；
})
}
}););调用
addEventListener（）
时不应测试变量。如果同时调用
tileBlack（）
和
rainbowTile（）
，则两个磁贴都有事件侦听器

相反，您应该只添加一个事件侦听器一次，并且它应该在变量运行时检查该变量


Array.from（tiles）.forEach（tile=>tile.addEventListener（“mouseover”，事件=>{
if（黑色）{
event.target.style.backgroundColor=“黑色”；
}否则{
让randomnum=Math.floor（Math.random（）*255）
让randomnum2=Math.floor（Math.random（）*255）
让randomnum3=Math.floor（Math.random（）*255）
tile.addEventListener（“鼠标悬停”，函数（事件）{
event.target.style.backgroundColor=`rgb（${randomnum}，${randomnum2}，${randomnum3}）`；
})
}
}););
What calls
rainbowTile（）
？我调用了编辑器中的所有函数。但是，我没有在这里添加它们。单击按钮调用rainbowTile（）函数。没有问题。它将黑色变量更改为false，并使用随机颜色绘制正方形。但是，如果单击按钮，我的blackButton（）函数似乎不起作用。正方形仍然用随机生成的颜色绘制。在事件处理程序中添加事件处理程序几乎总是错误的。通过
addEventListener（）
添加的事件处理程序是累积的-添加另一个事件处理程序不会影响先前添加的事件处理程序。什么调用
rainbowTile（）
？我调用了编辑器中的所有函数。但是，我没有在这里添加它们。单击按钮调用rainbowTile（）函数。没有问题。它将黑色变量更改为false，并使用随机颜色绘制正方形。但是，如果单击按钮，我的blackButton（）函数似乎不起作用。正方形仍然用随机生成的颜色绘制。在事件处理程序中添加事件处理程序几乎总是错误的。通过
addEventListener（）
添加的事件处理程序是累积的-添加另一个事件处理程序不会影响先前添加的事件处理程序。