HTML and CSS Reference
In-Depth Information
To change the background color:
◗
1.
Return to the
hanjie.js
file in your text editor.
◗
2.
Directly below the setupPuzzle() function, insert the following code for the
changeBackground() function (see Figure 13-18):
function changeBackground() {
/* Determine the current background color of the data cell */
var bColor = this.style.backgroundColor;
/* If the color is gold, make it dark gray; if the color
is dark gray, change it to white; if the color is white,
change it back to gold */
if (bColor == “rgb(233, 207, 29)”) bColor = “rgb(101, 101, 101)”
else if (bColor == “rgb(101, 101, 101)”) bColor = “white”
else bColor = “rgb(233, 207, 29)”;
/* Apply the new background color to the data cell */
this.style.backgroundColor = bColor;
}
Figure 13-18
the changebackground() function
changes the cell
color from gold t
o
dark gray to white
and back to gold
◗
3.
Add the following statements to the
for
loop of the setupPuzzle() function,
as shown in Figure 13-19, to apply an
onclick
event handler to every cell in
the puzzle:
/* Change the color with each click */
puzzleCells[i].onclick = changeBackground;
Figure 13-19
calling the changebackground() function
changes the
background col
o
r
each time the user
clicks a puzzle cell
