• Choose a category
• All
• Classic-Fiction

This code handles the data input and output:

1. Create a variable for the name.

This is an ordinary string variable.

2. Copy the value of the textbox into the variable.

Now that you have a variable representing the textbox, you can access its value property to get the value typed in by the user.

3. Create a message for the user.

Use ordinary string concatenation.

4. Send the message to the output textbox.

You can also write text to the value property, which changes the contents of the text field on the screen.

Text fields always return string values (like prompts do). If you want to pull a numeric value from a text field, you may have to convert it with the parseInt() or parseFloat() functions.

Writing to the Document

Form elements are great for getting input from the user, but they’re not ideal for output. Placing the output in an editable field really doesn’t make much sense. Changing the Web document is a much better approach.

The DOM supports exactly such a technique. Most XHTML elements feature an innerHTML property. This property describes the HTML code inside the element. In most cases, it can be read from and written to.

So what are the exceptions? Single-element tags (like and ) don’t contain any HTML, so obviously reading or changing their inner HTML doesn’t make sense. Table elements can often be read from but not changed directly.

Figure 5-8 shows a program with a basic form.

Figure 5-8: Wait, there’s no output text field!

This form doesn’t have a form element for the output. Enter a name and click the button, and you see the results in Figure 5-9.

Amazingly enough, this page can make changes to itself dynamically. It isn’t simply changing the values of form fields, but changing the HTML.

Preparing the HTML framework

To see how the page changes itself dynamically, begin by looking at the XHTML body for innerHTML.html:

Inner HTML Demo

Figure 5-9: The page has changed itself.

The code body has a couple of interesting features:

♦ The program has a form. The form is pretty standard. It has a text field for input and a button, but no output elements.

♦ The button will call a sayHi() function. The page requires a function with this name. Presumably, it says hi somehow.

♦ There’s a div for output. A div element in the main body is designated for output.

♦ The div has an ID. The id attribute is often used for CSS styling, but the DOM can also use it. Any HTML elements that will be dynamically scripted should have an id field.

Writing the JavaScript

The JavaScript code for modifying innerHTML isn’t very hard:

The first step (as usual with Web forms) is to extract data from the input elements. Note that I can create a variable representation of any DOM element, not just form elements. The divOutput variable is a JavaScript representation of the DOM div.

Finding your innerHTML

Like form elements, divs have other interesting properties you can modify. The innerHTML property allows you to change the HTML code displayed by the div. You can put any valid XHTML code you want inside the innerHTML property, even HTML tags. Be sure that you still follow the XHTML rules so that your code will be valid.

Even with the CDATA element in place, validators get confused by forward slashes (like the one in the tag). Whenever you want to use a / character