HTML and CSS Reference
initial swapPuzzle() function
puzzle title is based
on the value of the
uses the eval()
function to load the
hint, rating, and
associated with the
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
/* Write the puzzle data into the Web page */
document.getElementsByTagName(“h1”).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);
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
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.