HTML and CSS Reference
In-Depth Information
◗
7.
Click the
OK
button to load the second puzzle.
◗
8.
Click the
Puzzle 3
button to load the third puzzle; but in response to the confir-
mation dialog box, click the
Cancel
button. Verify that the second puzzle remains
displayed on the Web page.
Using an Alert Dialog Box
The last feature that Rebecca wants you to add is a notification when a user has success-
fully solved a puzzle. A puzzle is solved when the background color is gray for all cells
in the
marked
class, and white for all cells in the
empty
class. If even one cell is not the
correct color, the puzzle is not solved. You'll test for this condition by examining every
cell in the table using the following code:
var allCells = document.querySelectorAll(“#hanjieGrid td”);
var solved = true;
for (var i = 0; i < allCells.length; i++) {
var cellColor = allCells[i].style.backgroundColor;
var cellClass = allCells[i].className;
if ((cellClass == “marked” && cellColor !== “rgb(101, 101, 101)”)
|| (cellClass == “empty” && cellColor !== “white”)) {
solved = false;
break;
}
}
This code sets the initial value of the
solved
variable to the Boolean value
true
, and then
employs a
for
loop to test whether every table cell is the correct color for its cell class. If
one counter-example is found, the value of the
solved
variable is changed to
false
and
the code breaks off the
for
loop; there is no reason to continue the
for
loop after find-
ing an incorrectly colored cell.
If the value of the
solved
variable is still
true
after completing the
for
loop, the fol-
lowing code will display an alert box informing the user that the puzzle has been solved:
if (solved) alert(“Congratulations! You solved the puzzle!”);
You'll add this code to the checkSolution() function and then call the checkSolution()
function whenever a user clicks any one of the table data cells.
