g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Low Carb: 8:00 PM

Full Schedule
g JavaScript / Java Site

BellaOnline's JavaScript / Java Editor


JavaScript Basics - User Interaction

Guest Author - Julie L Baumler

Generally, the most compelling reason people have to use JavaScript for web pages is to allow interaction with users. In order to do this, you need to have a way to gather information from the users. There are a number of ways to do this, but forms are the most common because they are the most versatile. Once you have gathered information from the user, you need to have a way to display your reaction back to the user. JavaScript provides a number of ways to do this as well, the simplest and most versatile is probably to use the HTML DOM (Document Object Model) innerhtml property.

The following example asks the user for their name and responds back with a personalized greeting. You will notice that you don't see any <script> tags this is because technically this is not a JavaScript example, all of the input, processing and output is done using the HTML DOM. However, if you wanted to do more complex (i.e. interesting) processing of the information you got from the user, you could do so using JavaScript.

<div id="Greeting">
Hi! What's your name?
<form action="user_input.html">
<input name="username"
type="text" label="User's Name"
onchange="document.getElementById('Greeting').innerHTML = '<center> <a href=\'\'> <img src=\'\'> </a> <br/> Hello ' + document.getElementById('username').value +'! Nice to meet you! - Pico </center>'"
(Hit Tab or Enter/Return or click off the field to submit name.)

You can see this example in action (or download the code) here.

There are a couple of key features here. You will notice that all of the HTML code is within a <div> element and that the id attribute is used on several of the attributes. The HTML DOM includes a method called "getElementByID()" that allows you to identify a specific tag by the value of its id attribute. We will use this twice, once to retrieve the user input from the form, and once to set a new value for the contents of the <div> tag.

Pretty much all of the work of this code sample takes place in the <input> tag, and within the tag, the id and onchange attributes provide for the interactivity. The id attribute is used so that we can find and refer to this tag within the HTML DOM. The onchange attribute is an HTML DOM event, its value is an action to be taken when the event occurs (in this case the contents of the text input box is changed.) document.getElementById('Greeting').innerHTML refers to the contents of the tag with an id of Greeting, in this case the <div> tag that holds the input field and directions. Setting this to a new value changes what is displayed within that tag in the document. We set this to some predetermined HTML (remember tags can be nested in HTML) and the user's name. Of course, we don't know what the user's name is in advance. We do, however, know that it will be in the input box with an id of 'username' this is referred to as document.getElementById('username').value.

This is very simple interactivity, but when you combine this with some JavaScript you can create some very interesting web pages.
This site needs an editor - click to learn more!

Add JavaScript+Basics+%2D+User+Interaction to Twitter Add JavaScript+Basics+%2D+User+Interaction to Facebook Add JavaScript+Basics+%2D+User+Interaction to MySpace Add JavaScript+Basics+%2D+User+Interaction to Digg JavaScript+Basics+%2D+User+Interaction Add JavaScript+Basics+%2D+User+Interaction to Yahoo My Web Add JavaScript+Basics+%2D+User+Interaction to Google Bookmarks Add JavaScript+Basics+%2D+User+Interaction to Stumbleupon Add JavaScript+Basics+%2D+User+Interaction to Reddit

Getting Ready to Learn JavaScript
JavaScript Resources
JavaScript/Java Newsletter
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

For FREE email updates, subscribe to the JavaScript / Java Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 by Julie L Baumler. All rights reserved.
This content was written by Julie L Baumler. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.


g features
Hearing Dog Tool - Adding Randomness

Hearing Dog Training Tool setTimeout()

GCJ - an Independant Java Implementation

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor