javascript - 使用 eventListener 更改 bool 值

Question

我正在尝试创建一个 eclipse 刻草图项目。我有一个函数，如果“黑色变量”为真，则将方 block 涂成黑色。此外，我还有另一个功能(它是点击效果功能上的按钮)，它能够将“黑色变量”变成假值并用随机生成的颜色绘制方 block 。但是，我无法创建一个将“黑色变量”变为 true 的按钮。即使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;
    })
}

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

Answer 1

调用 addEventListener() 时不应测试该变量。如果您同时调用 tileBlack() 和 rainbowTile()，则图 block 将同时具有两个事件监听器。

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

Array.from(tiles).forEach(tile => tile.addEventListener("mouseover", event => {
  if (black) {
    event.target.style.backgroundColor = "black";
  } else {
    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})`;
    })
  }
}););