I'm working on a game in JavaScript (I'm a novice), classic Lights Off puzzle. I managed to get the table to print out, and. However, I have a problem with checkAllOff function, which is supposed to test whether all buttons are in the off state (black), and if this is the case it should display a message "You win!". I want this function to also remove the message if, following a subsequent press, one or more buttons returns to the on state(yellow). I'm asking for pointing out my mistakes in that functions and an explenation of how it should be done properly. My code is included in images:
<!DOCTYPE html><html><head><meta charset="UTF-8"><!-- JavasScript code is contained within an HTML <script> element --><script>
function toggle(i,j) {
b=document.getElementById("but_" + i + j)
t = b.innerHTML
if (t=="X") {b.innerHTML = "O";
b.setAttribute( "style", "color:red; background-color:yellow" )
}
if (t=="O") {b.innerHTML = "X";
b.setAttribute( "style", "color:white; background-color:black" )
}
}
function checkAllOf(){
//Check if board is solved
var i=0
var j=0
var counter=0
b=document.getElementById("but_" + i + j)
t = b.innerHTML
for(i=0;i<=5;i++)
for (j=0; j<5; j++){
if(t=="X")
counter++;
}
if (counter==25)
return(false);
return(true);
}
function press(i,j) {
while(1)
{
toggle( i, j )
if (j!=0)
toggle(i, j-1)
if (j+1<5)
toggle(i, j+1)
if (i+1<5)
toggle(i+1, j)
if (i!=0)
toggle(i-1, j)
if (checkAllOf){
alert(All lights are out! You win!)
}
}
}
function generateGrid() {
var d = document.getElementById("button-grid");
var table = document.createElement("table");
d.appendChild(table);
for (var i = 0; i < 5; i++) {
var row = document.createElement("tr");
for (var j = 0; j < 5; j++) {
var cell = document.createElement("td");
cell.innerHTML = "<button type=button id=but_" + i + j +" onclick=\"press(" +i + ',' +j + ")\"" + " style=\"color:red; background-color:yellow\"" +">O</button>" ;
row.appendChild(cell);
}
table.appendChild(row);
}
toggle(2,2) // Set middle button to off state (otherwise seems to be impossible).
}
window.onload = function() {
generateGrid();
};
</script> <title>Lights Off Puzzle</title></head> <body><div align="center" id="button-grid"><h1> *** Lights Off *** </h1><h2> Click on buttons until they all turn black </h2></div></body></html>
