HTML and CSS Reference
In-Depth Information
EXAMPLE
14.28 (
CONTINUED
)
<option value="yellow">yellow</option>
<option value="lightgreen">green</option>
</select>
<br />
</form>
<p>
This is a test.
</p>
</body>
</html>
EXPLANATION
1
The JavaScript program starts here.
2
A JavaScript user-defined function called
bodyColor()
is defined.
3
The number,
selectedIndex
, of the option chosen from a select list is assigned to
variable
i
.
4
The value of the selected option is one of the colors listed in the select list on line 8.
5
The
getElementById()
method returns a reference to the
body
tag, whose
id
is
bdy
.
By using the
style
property with the reference to the body, the background color
of the document is changed with this statement.
6
The
body
tag is given an
id
attribute by which to identify it.
7
An HTML form called
form1
starts here.
8
A select menu is defined to give the user options to change the background color
of the document on the fly. The
onChange
event is triggered when one of the op-
tions is selected, and is handled by invoking the function
bodyColor()
. The output
is shown in Figure 14.33.
Figure 14.33
Changing the background color dynamically (left); now the color is green
(right).
