javascript - 使用 Javascript 在鼠标单击时更改表格单元格的颜色

Question

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

白色：0
黑色：1
灰色：2。

我想做一个益智游戏（确切地说是 Griddler），如果正确解决了谜题，每个单元格都必须是黑色和灰色的。

Answer 1

这是一个工作小提琴

内部window.onload（或准备好 DOM，随你喜欢）：

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];
    }
}

（注意，在浏览器中，onclick 应该是在旧 IE 中使用addEventListener和填充的事件侦听器，attachEvent如果您需要支持它）