HTML and CSS Reference
In-Depth Information
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.
Search WWH ::

Custom Search