Change the color of a table's cell on mouse click using Javascript -

how assign 3 colors cell, , change them on every click? let's have 10x10 table, , default colour white, on first click on cell changes black, on second changes grey, , on third it's white again, , every colour cells value, like:

white: 0
black: 1
grey: 2.

i want make puzzle game (griddler exactly) , every cell must black , grey if puzzle solved correctly.

here working fiddle

inside window.onload (or dom ready, whichever you'd like):

var colors = ["white","black","gray"]//array of colors  var reverseref = {"white":0,"black":1,"gray":2};   var cells = document.getelementsbyclassname("block");//block class name should give blocks  for(var i=0;i<cells.length;i++){//attach event blocks     cells[i].onclick = function(){//when click them         //change background color         //(reverseref[this.styles.backgroundcolor]+1)%3 means number value color, increase one, , modulus 3 (which means values between 0 , 2         this.style.backgroundcolor=colors[(reverseref[this.style.backgroundcolor]+1)%3];     } } 

(note, in browser onclick should event listener using addeventlistener , shimming attachevent in old ie if need support it)