lights_off.html --- lights

lights_off.html

Download lights_off.html file
<!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 press(i,j) {
       toggle( i, j )
}


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 it seems to be impossible).
}

window.onload = function() {
        generateGrid();
};
</script> 

<title>Lights Off Puzzle</title>
</head> 

<body>
<div id="button-grid"></div>
</body>

</html>