Affordable, reliable
web hosting solutions


24/7x365 service - Live Technical Support

HTML Forms: Interacting with the User

Home > Build > Software > Programming

(1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12)

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>

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 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 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 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.

Try It Out - onmouseup and onmousedown

Two less commonly used events supported by the object in version 4 or higher browsers are the onmousedown and onmouseup events. You can see these two events in action in the next example.

<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
function myButton_onmouseup() {
document.form1.myButton.value = "Mouse Goes Up"
}
function myButton_onmousedown() {
   document.form1.myButton.value = "Mouse Goes Down"
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=form1>
<INPUT TYPE='button' NAME='myButton' VALUE=' Mouse Goes Up '    onmouseup="myButton_onmouseup()"    onmousedown="myButton_onmousedown()">
</FORM>
</BODY>
</HTML>

Save this page as ch6_examp3.htm and load it into your browser. If you click the button with your left mouse button and keep it held down, you'll see the text on the button change to "Mouse Goes Down". As soon as you release the button, the text changes to "Mouse Goes Up".

Affordable, reliable web hosting solutions

HTML Forms: Interacting with the User

Affordable, reliable
web hosting solutions