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

Figure 13-11 initial swapPuzzle() function

puzzle title is based
on the value of the
clicked button

uses the eval()
function to load the
hint, rating, and
puzzle variables
associated with the
selected puzzle

◗

2. Save your changes to the file.

You now can use the title , hint , rating , and puzzle variables you just created to display
the puzzle's title, hint, rating, and grid, respectively. The commands to do this echo those
you wrote earlier for the init() function when you were displaying the first puzzle only.
You'll add the commands to the swapPuzzle() function now.

To complete the swapPuzzle() function:

◗

1. Add the following commands to the end of the swapPuzzle() function, as shown in
Figure 13-12:

/* Write the puzzle data into the Web page */
document.getElementsByTagName(“h1”)[0].innerHTML = title;
document.getElementById(“hint”).innerHTML = hint;
document.getElementById(“rating”).innerHTML = rating;

/* Display the puzzle using the drawGrid() function */
document.getElementById(“puzzle”).innerHTML = drawGrid(puzzle);

Figure 13-12 adding to the swapPuzzle() function

displays the title,
hint, and rating for
the selected puzzle

retrieves the HTML
code of the We b
table for the
selected puzzle

◗

2. Save your changes to the file, and then reload hanjie.htm in your Web browser.

◗

3. Click the Puzzle 1 , Puzzle 2 , and Puzzle 3 buttons on the Web page. Verify that
a different puzzle is shown for each button. Figure 13-13 shows the second and
third puzzles created by Rebecca.