Javascript Programing

JAVASCRIPT PROGRAMING

In this exercise, you will create a program that writes user input from a text box to a list on the web page. Your program will also write a than-you message to the page after the user has entered five items. Finally, you will create an event listener for the Submit button.

1-In your text editor, open index.htm from the files provided by your instructor. Enter your name and today's date where indicated in the comment section in the document head.

2-At the bottom of the document, before the closing </body> tag, create a script section.

3-Withing the script section create two global variables: one named i with a value of 1, and the other named listItem with its value set an empty string.

4-Below the variables, create a function called processInput(). Within the function, create an if statement that runs if the value of i is less than or equal to 5. The if statement should perform the following actions:

a-Set the value of the listItem variable to the string "item" concatenated with the value of i.

b-Set the content of the element with an id of toolbox.

c-Set the value of the element with the id of toolbox to an empty string.

5-Before closing the } of the if statement, create a nested if statement. If the value of i is equal to 5, the statement should change the content of the element with the id of resultExpl to the string "Thank you for your suggestions."

6-Before closing the } of the main if statement, after the nested if statement, add a statement to increment the value of i by 1.

7-Add an event listener for the click event of the Submit button (with the id of button).

8-Add comments to document your work, and then save your work. Open index.html in a browser, type the name of a tool in the text box, and then click Submit. The name of the tool you typed is added to the bulleted list on the right side of the web page. Enter the names of four more tools, clicking Submit after each one. After you enter the fifth name, the text "Thanks you for your suggestions." is displayed below the bullted list, as shown in the Figure below.

9-Fix any errors in your code until it works as you expect.