HTML and CSS Reference
In-Depth Information
EXAMPLE
13.26 (
CONTINUED
)
5
function morning(){
alert ("Good Morning");
}
function noon(){
alert("Let's have lunch.");
}
function night(){
alert("Good-night!");
}
</script>
</head>
<body>
<h2>
Greetings Message
</h2>
<hr />
<form>
6
<input type="button" id="button1" value="Morning" />
<input type="button" id="button2" value="Noon" />
<input type="button" id="button3" value="Night" />
</form>
</body>
</html>
EXPLANATION
1
Some global variables are defined to be used later in the script.
2
The
onload
event property of the
window
object mimics the behavior of the HTML
onLoad
event handler of the body element. The function defined will be called
when a document or frameset is completely loaded into its window or frame.
3
The
document.getElementById()
method takes the
id
of each of the HTML buttons
and returns a reference to each of them. Now JavaScript has access to the buttons.
4
Using the
onclick
property with the button reference allows JavaScript to react to
the click event when the user clicks one of the buttons. The function called
morn-
ing
is assigned to this property and will be called when “button1” is clicked. Note
that this is a reference to the function and there are no quotes or parentheses. The
actual function it references is on line 5.
5
This is the actual function that will be called when the user clicks the “Morning”
button.
6
Three HTML buttons are defined in the document. Each is given a unique
id
to be
used in the JavaScript program as an argument to the
document.getElementById()
method. See Figures 13.44 and 13.45.
