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

rating . Finally, the HTML code for the Web table containing the puzzle will be stored in
the figure box with the id puzzle . The following is the initial code for the function:

function init() {
document.getElementsByTagName(“h1”)[0].innerHTML = “Hanjie Puzzle
1”;
document.getElementById(“hint”).innerHTML = puzzle1Hint;
document.getElementById(“rating”).innerHTML = puzzle1Rating;
document.getElementById(“puzzle”).innerHTML = drawGrid(puzzle1);
}
The function uses the puzzle1 , puzzle1Hint , and puzzle1Rating variables already entered
in the grids.js file and displayed earlier in Figure 13-3, loading the text value of each vari-
able into the appropriate element in the document using the innerHTML property. Notice
that the HTML content for the puzzle figure box is set using the drawGrid() function
with the puzzle1 variable as the parameter value because that function will generate the
HTML code of the puzzle table. You'll add this function to the hanjie.js file now and then
you'll test your code.

To create the init() function:

◗

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

◗

2. Directly above the drawGrid() function, insert the following code as shown in
Figure 13-7:

function init() {
/* Write the first puzzle data into the Web page */
document.getElementsByTagName(“h1”)[0].innerHTML = “Hanjie
Puzzle 1”;
document.getElementById(“hint”).innerHTML = puzzle1Hint;
document.getElementById(“rating”).innerHTML = puzzle1Rating;

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

Figure 13-7 creating the init() function

displays the first
puzzle's title, hi nt,
and difficulty rating

uses the dra wGrid()
function to generate
the HTML code for
the first puzzle's grid

◗

3. Save your changes to the file.

◗

4. Reload the hanjie.htm file in your Web browser and verify that the page displays
the first puzzle as shown in Figure 13-8.