HTML and CSS Reference
In-Depth Information
To create the showSolution() function:
1. Return to the hanjie.js file in your text editor.
2. Directly below the unpeek() function, insert the following showSolution() function
(see Figure 13-27):
function showSolution() {
/* Create a collection of all puzzle data cells */
var allCells = document.querySelectorAll(“#hanjieGrid td”);
/* Remove the inline style colors from each cell,
leaving only the default external style sheet colors */
for (var i = 0; i < allCells.length; i++) {
allCells[i].style.backgroundColor = “”;
}
}
Figure 13-27
the showsolution() function
loops through all
of the cells in the
puzzle, removin g
the background-
Color inline style
3. Scroll up to the init() function and add the following statements to create an
onclick event handler for the Show Solution button (see Figure 13-28):
/* Add an event handler to the Show Solution button */
document.getElementById(“solve”).onclick = showSolution;
Figure 13-28
adding an event handler for the show solution button
runs the show
Solution() function
when the Show
Solution button is
clicked
4. Save your changes to the file, and then reload hanjie.htm in your Web browser.
5. Click the Show Solution button for each of the three puzzles and verify that click-
ing the button reveals the complete puzzle solution.
Search WWH ::




Custom Search