• Choose a category
• All
• Classic-Fiction

8. Close up the list.

Once the loop has finished cycling through all the objects, you can close up the unordered list you’ve been building.

result += “<\/ul> \n”;

9. Print results to the output div.

The output div’s innerHTML property is a perfect place to print the unordered list.

output = document.getElementById(“output”);

output.innerHTML = result;

Something strange is going on here. The options of a select box act like an array. An unordered list is a lot like an array. Bingo! They are arrays, just in different forms. You can think of any listed data as an array. Sometimes you organize the data like a list (for display), sometimes like an array (for storage in memory), and sometimes it’s a select group (for user input). Now you’re starting to think like a programmer!

Check, Please: Reading Check Boxes

Check boxes fulfill another useful data input function. They’re useful any time you have Boolean data. If some value can be true or false, a check box is a good tool. Figure 6-3 illustrates a page that responds to check boxes.

Check boxes are independent of each other. Although they’re often found in groups, any check box can be checked or unchecked regardless of the status of its neighbors.

Building the check box page

To build the check box page shown in Figure 6-3, start by looking at the HTML:

What do you want on your pizza?

Your order:

Figure 6-3: You can pick your toppings here. Choose as many as you like.

Each check box is an individual input element. Note that check box values aren’t displayed. Instead, a label (or similar text) is usually placed after the check box. A button calls an order() function.

Responding to the check boxes

Check boxes don’t require a lot of care and feeding. Once you extract it, the check box has two critical properties:

♦ You can use the value property to store a value associated with the check box (just like you do with text fields in Chapter 5 of this minibook).

♦ The checked property is a Boolean value, indicating whether the check box is checked or not.

The code for the order() function shows how it’s done:

For each check box:

1. Determine whether the check box is checked.

Use the checked property as a condition.

2. If so, return the value property associated with the check box.

Often, in practice, the value property is left out. The important thing is whether the check box is checked. If chkMushroom is checked, the user obviously wants mushrooms, so you may not need to explicitly store that data in the check box itself.

Working with Radio Buttons

Radio button groups appear pretty simple, but they’re more complex than they seem. Figure 6-4 shows a page using radio button selection.

Figure 6-4: