Home
So far, most of our programs have had no user interaction. There have been a few examples of buttons (to show the time or roll the dice), but they were not explained to any depth. This post explains the basics of using buttons in Javascript.
This was our first example program using buttons:
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
Let's review that program first.
As with most of our HTML programs, this one starts with a "DOCTYPE html" statement that lets the world know that it's supposed to be an HTML document. That's followed by an <html> tag at the top and a matching </html> tag at the bottom. Inside the <html> tags is a pair of matching <body> and </body> tags. These generally define what will be shown in the browser window itself. Below the opening <html> tag is a level 2 heading (<h2> and </h2>). This shows up as large bold text near the top of the page.
There are only 2 more HTML tags left to be discussed, the button tag ("<button ...>") and the paragraph tag ("<p ...>"). It turns out that these two tags work together in this example because the button uses the paragraph as a place to show the date and time. Let's see how this works.
Let's start with the paragraph tag. Here it is:
<p id="demo"></p>
What's most odd here is that a normal paragraph tag will have text inside of it. For example, a typical paragraph might look like this:
<p>Four score and seven years ago ...</p>
The paragraph text is sandwiched between the <p> tag and the </p> tag. With no text between those tags, this paragraph is empty and shows nothing (other than taking up some space). What purpose would that serve?
The answer is in the second odd thing. This paragraph tag has an "id" inside of it (id="demo"). The "id" name ("demo" in this case) lets Javascript get ahold of this paragraph and modify it. So while it may start off as being empty, Javascript can change that by putting things into this particular paragraph. And that's exactly what happens through the button tag.
Here's the button tag with some color coding and indentation:
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.
</button>
The black text between the start and end tags ("Click me to display Date and Time.") is the text that is shown of the face of the button. The blue parts represent the basic tag pair itself (<button...> and </button>). But this button also has two parameters with names of "type" and "onclick". The "type" parameter is a bit redundant and not of interest here. But the "onclick" parameter is the key to understanding how a button works.
When a button is clicked, the web browser will perform whatever Javascript is contained in the "onclick" parameter. In this case, a button click will perform the following Javascript code:
document.getElementById('demo').innerHTML = Date() This can be roughly translated as "get the element with an ID of "demo" and set its innerHTML to the current date (including current time)". Well, which element has an ID of "demo"? That would be the empty paragraph that we mentioned earlier. So clicking the button will put the current date and time into the otherwise empty paragraph. And clicking again will replace the previous date (and time) with the current value. That's the heart of this little program.
Now that we know the basics of using buttons, let's create a new program with buttons to select the background color ("body" color) of the page. Here's what it will look like with "Pink" selected:
- bg_buttons.png (5.69 KiB) Viewed 204 times
To keep things simple (and easier to type), we'll initially use the three primary colors and white. We'll also omit the redundant "button" parameter (but be prepared to add it if your browser complains). We'll start by defining the buttons without connecting them to any logic:
<!DOCTYPE html>
<html>
<body>
<button> Red </button>
<button> Green </button>
<button> Blue </button>
<button> White </button>
</body>
</html>
If you run that program, it will show all four buttons, but clicking them won't do anything. So next we'll add the logic to find the "body" tag and set the background color according to the label on each button. We could define an ID for the body (as we did earlier), but we can also look up the body element by its tag name of "body" (since there should only be one "body" in the HTML document). Here's the updated program:
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementsByTagName('body')[0].bgColor = 'red'"> Red </button>
<button onclick="document.getElementsByTagName('body')[0].bgColor = 'green'"> Green </button>
<button onclick="document.getElementsByTagName('body')[0].bgColor = 'blue'"> Blue </button>
<button onclick="document.getElementsByTagName('body')[0].bgColor = 'white'"> White </button>
</body>
</html>
We can skip the details of the "getElementsByTagName function for now, and it turns out that this version works very well. But there is quite a bit of duplicated code for each button. This would be a good place to use a function. We haven't covered functions yet, so this is just a preview. Basically, a Javascript function is a bit of code with a name so it can be used from other parts of the program. Functions should be defined between <script> and </script> tags. We'll name our new function "setbg" (for set background), and it will take a color name and then set it as the background color for the "body" tag. Then each of the color buttons can simply call this function instead of doing the detailed work. This removes the duplicated code, and makes it easier to add new colors. In this example, the new colors yellow, pink, and black have been added:
<!DOCTYPE html>
<html>
<body>
<script>
function setbg ( color ) {
document.getElementsByTagName('body')[0].bgColor = color;
}
</script>
<button onclick="setbg('red')"> Red </button>
<button onclick="setbg('green')"> Green </button>
<button onclick="setbg('blue')"> Blue </button>
<button onclick="setbg('yellow')"> Yellow </button>
<button onclick="setbg('pink')"> Pink </button>
<button onclick="setbg('black')"> Black </button>
<button onclick="setbg('white')"> White </button>
</body>
</html>
This version is now complete. It uses 7 buttons and one function. The final version (and all others are in the attached .zip file).
Exercise 6 (Run each of the JavaScript Programs):
Copy each of the programs in this post and run them. You can copy each program and save it in a text file to open with your browser or paste each program into the w3schools web interface to run it.
Exercise 7 (Modify the final program to add 2 more colors):
Copy the final program in this post and change it to include at least 2 more colors. Run it to be sure that they all work. You can edit a text file to open with your browser or enter the program into the w3schools web interface to run it.
