javascript - Javascriptを使用してマウスクリックでテーブルのセルの色を変更する

Question

セルに 3 つの色を割り当てて、クリックするたびに変更するにはどうすればよいですか? 10x10のテーブルがあり、デフォルトの色が白で、セルを最初にクリックすると黒に変わり、2番目に灰色に変わり、3番目に再び白になり、すべての色に対してセルも取得するとします次のような値:

白: 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