Handling Events - JavaScript by Example - page 485

EXAMPLE 13.13 ( CONTINUED )

<p>

4 <input type="button"

value="Print Form Stuff"

5 onClick="display_formval(this.form);" />

<input type="button"
value="Print Button Stuff"

6 onClick="display_buttonval(this) ; " />

<input type="reset" value="Clear">
</form>
</body>
</html>

EXPLANATION
1 The function called display_formval() is defined. Its only parameter is a reference

to a form; in this example the form started on line 3. The purpose of this function
is to display the text that the user typed in a text box, called “namestring” . The
function is called when the onClick event handler is triggered on line 5.

2 The function called display_buttonval() is defined. Its only parameter is a button

input type, defined on line 4. It displays the value in the button.

3 This is the start of a form named simple .

4 The input type is a button in the form named simple .

5 The onClick event handler is triggered when the user clicks this button. The argu-

ment sent to the display_formval() function, this.form , is a reference to the form
object. Without the form property, the this keyword would refer to the current ob-
ject, the button. See line 6. Rather than using the full JavaScript hierarchy to ref-
erence a form, the this keyword simplifies the process.

6 The onClick event is triggered when the user presses this button. Because the han-

dler is assigned to the button, the this keyword is a reference to the button object.
The display is shown in Figure 13.15.

Figure 13.15 The user clicked the Print Form Stuff button.