Using Buttons for JavaScripts

To write scripts using buttons, we will first need to know how to place a button on the page. To do this, you will need to use the <FORM> tags around the button tag. Here is an example of the HTML that will place a button on the page:

See the example.

Here is what all this means:

1. <FORM>
   This creates a form so we can use a button.

2. <INPUT>
   This tag allows us to create an input area of some kind.

3. type="button"
   This command declares our input area to be a button.

4. value="Click Me"
   This will be the text people will see on the button. Write whatever you want your visitors to see.

5. name="button1"
   You can give the button a name for future reference and possibly for use in a script.

Now, I know you don't just want to make buttons that don't do anything, so let's look at a javascript command that will make the browser do something when a viewer clicks it:

Just place this command inside the INPUT tag you created the button with, like this:

Now, if you read the last section, you saw how to add text to the status bar using the onMouseover command. Well, you can also use a button to do this!

See the example.

You can also allow your viewers to change the background color of your page. Just use the following command, rather than the window.status command:

document.bgColor='color'

Just insert this as your instructions for the onClick command, like this:

See the example.

You can add as many of these buttons as you like, just be sure they have the option to change back to the original color. The next script will give you three choices: yellow, red, and original color.

See the example.

The last script we will do in this section will allow you to use your button as a link. It's pretty fun to use every now and then. Just use the following command in your onClick command:

Here is a script that will send you to a page I made just for this example:

See the example.