按钮不做任何事情，如果单击

Question

我正在制作一个蚀刻素描项目，当我点击黑色按钮，它工作。广场的背景色在盘旋时会变黑。但是，当我单击彩虹按钮时，不工作。它应该将正方形的背景颜色更改为在悬停时的随机颜色。

下面是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()函数在getGrid(size)函数中调用。像这样：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)];
}
...