Exploring the Document Object Model - HTML, CSS, and Dynamic HTML - page 923

To create the peek() function:

◗

1. Return to the hanjie.js file in your text editor.

◗

2. Directly after the changeBackground() function, insert the following peek() func-
tion (see Figure 13-21):

function peek() {
/* Create collection of cells that should be marked */
var markedCells = document.querySelectorAll(“#hanjieGrid
td.marked”);

/* Create collection of cells that should be empty */
var emptyCells = document.querySelectorAll(“#hanjieGrid
td.empty”);
}

Figure 13-21 insert the peek() function

Next, the function needs to loop through those two collections and identify the incor-
rect cells. A marked cell is incorrect if it is displayed with a white background, and an
empty cell is incorrect if it is displayed with a gray background (a gold background indi-
cates an unknown status and thus is never incorrect). The function then will change those
background colors to pink and red, respectively.

To change the background color for incorrect cells:

◗

1. Add the following code to the peek() function as shown in Figure 13-22:

/* Display every incorrect white cell in pink */
for (var i = 0; i < markedCells.length; i++) {
cell = markedCells[i];
if (cell.style.backgroundColor == “white”)
cell.style.backgroundColor = “rgb(255, 192, 192)”;
}

/* Display every incorrect darkened cell in red */
for (var i = 0; i < emptyCells.length; i++) {
var cell = emptyCells[i];
if (cell.style.backgroundColor == “rgb(101, 101, 101)”)
cell.style.backgroundColor = “red”;
}