更改表格的颜色'；使用Javascript在鼠标上单击s单元格

如何为一个单元格指定3种颜色，并在每次单击时更改它们？假设我有一个10x10表格，默认颜色为白色，第一次单击单元格时，它会变为黑色，第二次单击时，它会变为灰色，第三次单击时，它会再次变为白色，对于每种颜色，单元格也会得到一个值，如：

白色：0
黑色：1
格雷：2

我想做一个拼图游戏（确切地说是Griddler），如果拼图正确，每个单元格都必须是黑色和灰色。

在

窗口内。onload

（或DOM就绪，以您喜欢的为准）：

var colors=[“白色”、“黑色”、“灰色”]//颜色数组
var reverseRef={“白色”：0，“黑色”：1，“灰色”：2}；
var cells=document.getElementsByClassName（“块”）//block是一个类名称，您应该给出您的块
对于（var i=0；i
var colors = ["white","black","gray"]//array of colors 
var reverseRef = {"white":0,"black":1,"gray":2}; 

var cells = document.getElementsByClassName("block");//block is a class name you should give your blocks

for(var i=0;i<cells.length;i++){//attach an event to all blocks
    cells[i].onclick = function(){//when you click them
        //change the background color
        //(reverseRef[this.styles.backgroundColor]+1)%3 means get the number value for the color, increase it by one, and modulus it by 3 (which means you only get values between 0 and 2
        this.style.backgroundColor=colors[(reverseRef[this.style.backgroundColor]+1)%3];
    }
}