Clickable button with onclick event

Clickable button with onclick event:
In this tutorial we will create a clickable button with an onclick event. A button will be displayed on browser with assigned button text and when clicked an alert dialog box will be displayed.

If you want to follow the tutorial please download tutorial template here
If you are following these tutorials continue to use your own source code from previous tutorial.

An onclick event is added to the opening tag as shown below. I am going with an alert which will bring up an alert dialog that will display the text inside the brackets and an OK button.

<button type="button" onclick="alert('Button clicked')">Click here</button>

The alert method takes focus away from the current window and is used to get a message to a user. The user will have to click the OK button to continue back to original window.

Save your HTML document and test on browser of choice. If you wish to continue following the tutorials type Yes into the table data column after Clickable Button with an onclick event in the completed tutorials table.

<tr>    <td>Clickable Button with an onclick event</td>    <td>Yes</td> </tr>

To download the finished example for this tutorial please click here

In the next tutorial I will show you how to create a link to a web page via a button.

Previous tutorial

Next tutorial