Using Buttons for JavaScripts

---

Home/JavaScript/Basics/Buttons

Browser Compatibility:    NS2.02+, IE4+

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:

<FORM>
<INPUT type="button" value="Click Me" name="button1">
</FORM>

This will place a button on your page, but if you click on it nothing will happen....

---

---

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.

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

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

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

onClick="javascript commands"

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

<INPUT type="button" value="Click Me" name="button1" onClick=" ">

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!

<FORM>
<INPUT type="button" value="See Some Text" name="button2" onClick="window.status='You clicked the button!'; return true">
</FORM>

Now click the button below and see the text in the status bar at the bottom:

---

---

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:

<FORM>
<INPUT type="button" value="Change to Yellow!" name="button3" onClick="document.bgColor='yellow'">
</FORM>

Now you get the button below. Click on it to see this page with a yellow background!

---

---

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.

<FORM>
<INPUT type="button" value="Change to Yellow!" name="button3" onClick="document.bgColor='yellow'"> <br>
<INPUT type="button" value="Change to Red!" name="button4" onClick="document.bgColor='red'"> <br>
<INPUT type="button" value="Change back!" name="button5" onClick="document.bgColor='white'"> </FORM>

Now you will have these buttons. Give them a try!

---

---

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:

window.location='url'

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

<FORM>
<INPUT type="button" value="Go to my other Page!" name="button6" onClick="window.location='http://www.pageresource.com/jscript/newpage.htm'">
</FORM>

Here is the button. Give it a try, and see the other page.

---

---

That does it for now, let's go on to History Buttons.

---

Partners

---

CoolHomepages | Web Design Library | Website Content

---

The tutorials and articles on these pages are © 1997-2007 by John Pollock and may not be reposted without written permission from the author, and may not be reprinted for profit. Disclaimer.

---