Lab 6/7 Javascript

Gathering input from the user

Now we're ready to complete the function. We want to get the information the user entered and then use it to print a ticket. First, we'll get the information. We do that with an instruction that has a cumbersome name: document.getElementById().value

a. The first part, document.getElementById().value says "look at the entire document."

b.The second part, document.getElementById().value, says "find an element (an HTML tag) that has an id that matches whatever is inside the parentheses".

c. The third part, document.getElementById().value, says "now find the 'value' of that element"

Now we have to back up and be sure that our HTML elements have id attributes so that we can get them with document.getElementById().value.

1. Scroll down to the drop-down list (the <selection> and <option> tags), and give it an id "concertChoice" so it looks like this:

<select id="concertChoice">

2. Go to the textbox and give it an id "yourName" so it looks like this:

<input id="yourName" type="text" size="30"/>

3. Now scroll back up to the function we're writing add two more alert statements:

alert(document.getElementById("concertChoice").value);

alert(document.getElementById("yourName").value);

It's worth while to take a bit of time now to really understand these two statements.

The 'alert' parts just says to take whatever is inside the parentheses and put it in a popup box.

The 'document.getElementById()' part says to find an element on the page with the specified id value. That means "go look at every HTML tag on the page and find one that has an attribute id="" and see if it matches up. (Below you can see the code for the input box and the code for the drop-down list of concerts with the id attribute highlighted in red)

code for input box:

<input id="yourName" type="text" size="30"/>

code for drop-down list:

<select id="concertChoice">
    <option value="Herbie Hancock: June 18, 2008">Herbie Hancock</option>
    <option value="Nine Inch Nails: July 26, 2008">Nine Inch Nails</option>
    <option value="Eddie Izzard: July 11, 2008">Eddie Izzard</option>
    <option value="Foo Fighters: July 09, 2008">Foo Fighters</option>
</select>

The .value part of the statement (document.getElementById().value) is a bit mysterious and less straightforward:

In the case of the text box, the value will be whatever the user types in the box on the page.

In the case of the drop-down list, the value will be whatever is in the "value" attribute of the list item the user selected. NOTICE that this isn't necessarily what the user sees in the list. For example, in our case, for the first item, the user sees "Herbie Hancock" because that's what we've typed between the option tags:

<option value="Herbie Hancock: June 18, 2008">Herbie Hancock</option>

But the "value" for that list item is "Herbie Hancock: June 18, 2008".

<option value="Herbie Hancock: June 18, 2008">Herbie Hancock</option>

4. Save the file and open it in your browser. Choose a concert from the list and type in a name. Then click on the button.

You should first see a popup with the message you wrote before. When you close the popup, you should see the name of the concert you chose. When you close that, you should see the name you entered.

If you don't see them, check to be sure that:

you have a semicolon at the end of each alert statement

you typed the id name exactly as it appears in your input box

the alert lines are all between the opening and closing curly brackets of your function.

5. Go to the Catalyst quiz and answer question #7

Next, you will learn about variables...