Lab 7: Basic JavaScript Event Handling and DOM Solution

Description

Objective:

Use the provided HTML file and add a basic event handler to the page so that when the button is clicked the browser alerts the contents of the form input control added to your name and also changes the contents of the headline below the button to contain the contents of the form input control.

Process:

1. Start with the provided Lab7.html file.

2. Put all JavaScript for this Lab in the js file.

3. Add your name and email where indicated.

4. Do not change the structure of the HTML other than adding your info noted in step 3 and adding your JavaScript to the page.

5. Write JavaScript code to do the following things based on the demos we did in class.

1. 1. Add an event listener to the Alert Me div so that when it is clicked it will run some code.

   2. When the button is clicked it should do two things.

   3. (1) It should show an Alert box with the contents of the text field in the Alert box. I want you to also append your name and a colon (name:) before the value of the text box. For example if the text box says This is a test, I would have the Alert say Daniel Krieglstein:

This is a test

1. 4. (2) Also it should change the value of the h2 below the button to have the text contents of the text input control. Do not append your name to this one. Just have the exact contents of the text box.

1. 5. I will show an example of this behavior in class in a final version of the lab.

2. Submit the HTML file to the Basecamp collection of Labs.

This will be graded based on how well you followed directions and if the two behaviors work as expected when the Alert Me button is clicked.