Button Form Elements - Page 6
September 21, 2001
I'm starting our look at form elements with the standard button
element, as it's probably the most commonly used and is fairly
simple. The HTML tag to create a button is the <INPUT> tag.
For example, to create a button called myButton, which has the
words Click Me on its face, the <INPUT> tag would need to
be:
<INPUT TYPE="button" NAME="myButton" VALUE="Click Me">
The TYPE attribute is set to button and the VALUE attribute is
set to the text we want to appear on the face of the button. We
can leave the VALUE attribute off, but we'll end up with a blank
button, which will leave our users guessing as to its purpose.
This element creates an associated Button object; in this example
it is called myButton. This object has all the common properties
and methods described above, including the value property. This
allows you to change the text on the button face using
JavaScript, though this is probably not something you'll need to
do very often. What the button is really all about is the onclick
event.
We connect to the button's onclick event handler just as we did
for the onclick events of other HTML tags such as the <A>
tag. All we need do is to define a function that we want to
execute when the button is clicked (say, button_onclick()) and
then add the onclick event handler as an attribute of the
<INPUT> tag:
<INPUT TYPE="button" onclick="button_onclick()">
Try It Out - Counting Button Clicks
In the example below we use the methods described above to record
how often a button has been clicked on the button face.
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
var numberOfClicks = 0;
function myButton_onclick()
{
numberOfClicks++;
window.document.form1.myButton.value = 'Button clicked '
+ numberOfClicks +
' times';
}
</SCRIPT>
</HEAD>
<BODY>
<FORM
NAME=form1>
<INPUT TYPE='button' NAME='myButton' VALUE='Button clicked 0 times'
onclick="myButton_onclick()">
</FORM>
</BODY>
</HTML>
[The colored lines above are one line. They have been split
for formatting purposes.]
Save this page as ch6_examp2.htm. If you load this page into your
browser, you will see a button with Button clicked 0 times on it.
On repeatedly pressing this button, you will see the number of
button clicks recorded on the top of the button.
How It Works
We start the script block in the head of the page by defining a
global variable, accessible anywhere inside our page, called
numberOfClicks. We record the number of times the button has been
clicked in this variable, and use this information to update the
button's text.
The other piece of code in the script block is the definition of
the function myButton_onclick(). This function is connected to
the onclick event handler in the <INPUT> tag in the body of
the page. This tag is for a button element called myButton, and
is contained within a form called form1.
<FORM NAME=form1>
<INPUT TYPE='button' NAME='myButton' VALUE='Button clicked 0 times'
onclick="myButton_onclick()">
</FORM>
Let's look at the myButton_onclick() function a little more
closely. First, the function increments the value of the variable
numberOfClicks by one.
function myButton_onclick()
{
numberOfClicks++;
Next, we update the text on the button face using the Button
object's value property.
window.document.form1.myButton.value = 'Button clicked '
+ numberOfClicks +
' times';
}
[The colored lines above are one line. They have been split
for formatting purposes.]
The function is specific to this form and button, rather than a
generic function we'll be using in other situations. Therefore
I've referred to the form and button directly using
window.document.form1.myButton. Remember that the window object
has a property containing the document object, which itself holds
all the elements in a page, including the <FORM> element,
and that the button is embedded inside our form.
Common Properties and Methods - Page 5
Beginning JavaScript
Try It Out: onmouseup and onmousedown - Page 7
|
