Lab #7 Event Handling

Strategy

1. Create a web page that looks like the following:


Build things in pieces. Start with the drop-down box. Then add some options. Then add the text field and then add the button.

2. Add an event handler to the button (see Button Click Event Handler in the slides).

3. Start by having the event handler make a pop up box appear that says the movie name. In other words, when you click the button, a pop up box appears with the selected movie name.

4. Change the movie name and click the button. Does the pop up box say the new movie name?

5. Now have the pop up box also show the customer's name. Change the customer's name and verify that the message is different in the pop up box.

6. Now format the message. It should say: <customer name>, you just purchased a ticket for <movie name>

7. In the HTML, add an empty paragraph (<p></p>) below the text field and button.

8. The event handler should change the <p>'s innerHTML to be the text you put in the pop up box (remember to give the <p> an id). Look at the examples in the slides to see how to change innerHTML.

9. Remove the pop up box from the event handler. It should no longer appear.

That's it! The code to the event handler should be around 5-6 lines long. It is very short. Think before you type!