HTML and CSS Reference
In-Depth Information
The
onClick
event handler is used most often in forms. The click event occurs when a
button in a form, such as a radio or checkbox, is pressed. It also happens when an option
is selected in a Select menu. In Chapter 11, we used many examples of the
onClick
event
handler. Here are a few more.
EXAMPLE
13.14
<html>
<head>
<title>Event Handling and Forms</title>
<script type="text/javascript">
1
function greetme(message){
alert(message);
}
</script>
</head>
<body bgcolor="white">
<h2>
Greetings Message
</h2>
<hr>
2
<form>
3
<input type="button" value="Morning"
4
onClick="greetme('Good morning. This is your wakeup
call!')" />
<input type="button" value="Noon"
onClick="greetme('Let\'s do lunch.')" />
<input type="button" value="Night"
onClick="greetme('Have a pleasant evening.\nSweet
dreams...')" /
>
</form>
</body>
</html>
EXPLANATION
1
A simple function called
greetme()
is defined. It will be called each time the user
clicks one of three buttons and will send an alert message to the screen.
2
The HTML form starts here.
3
The input type for this form is three buttons, respectively labeled
“Morning”
,
“Noon”
, and
“Night”
. See Figure 13.16.
4
When the user clicks a button, the
onClick
event is fired up, and the
greetme()
function is called with a string. See Figure 13.17. Watch the quotes in the string.
Because the outside quotes are double quotes, the inner quotes are single. And if
the outer set of quotes had been single quotes, the inner set would be double. It's
very easy to ruin a program just because the quoting is off, as you well know by
now if you've gone this far in the book.
