如果單擊，按鈕不執行任何操作

Question

我正在制作一個Etch-a-Sketch項目，當我單擊黑色按鈕時，它可以工作。 懸停時方塊的背景顏色變為黑色。 但是當我點擊彩虹按鈕時它不起作用。 它應該在懸停時將正方形的背景顏色更改為隨機顏色。

這是 HTML：

<button id="black" class="btn" onclick="changeColor('black')"> <span> Black</span> </button>
<button id="rainbow" class="btn" onclick="changeColor('random')"> <span> Rainbow</span></button>

這是JS：

 let color = "black";

      function getColor(){
        if(true){
          if(color === "random"){
            let value = "0123456789ABCDEF";
        var random = "#";
        for (let i = 0; i < 6; i++){
          color += value[Math.floor(Math.random() * 16)];
        }
        this.style.backgroundColor = random;
          } else{
            this.style.backgroundColor = color;
          }
        }
      }
    
      function changeColor(select){
        color = select;
      }

getColor() function 在getGrid(size) function 中調用。 像這樣： square.addEventListener("mouseover", getColor);

這是小提琴： https://jsfiddle.net/JaredDev/w2kgubLq/6/

我應該怎么做才能使彩虹按鈕在懸停時為正方形/像素生成隨機背景顏色？

Answer 1

生成隨機顏色后，將其存儲在color中，該顏色將變為color = "random{some random string}" ，然后將random = "#"分配給this.style.backgroundColor 。 您需要將隨機顏色分配給random 。

...
for (let i = 0; i < 6; i++){
    random += value[Math.floor(Math.random() * 16)];
}
...