The CodeToday we will explore the integration of JavaScript with HTML to create simple interaction with the user. We shall create an HTML page with three buttons labeled RED, GREEN and BLUE. On clicking these buttons, the visitor will be able to change the background color of the web page. Another button labeled SAY HELLO will also be created, which will display a HELLO message when clicked. The code we are going to examine is given below. I would like you to copy, paste and save this code in an html file and then view it using your favorite web browser.
<html>
<head>
<title>Simple JavaScript Example</title>
</head>
<body>
<p><form><center>
<input type="button" value="RED" onClick="document.bgColor='#FF0000' ">
<input type="button" value="GREEN" onClick="document.bgColor='#00FF00' ">
<input type="button" value="BLUE" onClick="document.bgColor='#0000FF' ">
<br><br>
<input type="button" value="SAY HELLO" onClick="alert('Hello!')" >
</form></center></p>
</body>
</html>
HTML Buttons
Perhaps you know how to create clickable buttons with HTML. A button is created inside the <form> and </form>. They tell the browsers about starting and ending of an HTML form inside which we can create text boxes, selectable drop down menus, check boxes and clickable buttons. So to create an HTML button, you must create a form first. Next, to create a button, we use <input> tag. With this tag the associated attributes are type="button" and value="LABEL." This tells the web browser that the input type will be a clickable button labelled "LABEL." What will happen when someone clicks the button? That's handled by JavaScript.
JavaScript Events
As already mentioned in my previous articles, JavaScript is usually invoked on occurance of certain events. When a visitor clicks an HTML button, an "onClick" event occurs. So, inside the <input> tag, we specify what action to take on occurence of a click. In our example the color buttons change the background color of the page. That's where JavaScript objects come in.
A document object has certain methods / properties (see my article "Hello World! Dissected", if this is Greek to you). One of these properties is background color named bgColor. The background color of a page can be changed by assigning the required color to bgColor property of the document object. That's exactly what the line onClick="document.bgColor='#FF000'" is doing. "What sort of color is '#FF0000'?", you might ask. Read on for the answer.
| Note: JavaScript is case sensitive. This means that "bgColor" is different from "bgcolor." If you type "onclick" and don't get what you want, don't be surprised as the correct event name is "onClick." |
Go To Page:
1
2
The copyright of the article
Buttons and onClick in
JavaScript is owned by
Muhammad Ali Shah. Permission to republish
Buttons and onClick in print or online must be granted by the author in writing.
Would you please provide examples of how to use the events and properties listed in your document object summary table? I'm not familiar with how to use all of them. As well, even though I am familiar ...
|
For a complete listing of article comments, questions, and other discussions related to
Muhammad Ali Shah's
JavaScript topic, please visit the Discussions page.
|
