In this chapter you learned how to dynamically change an image using the getElementById$(\text{'}$id$\text{'}).$src

expression along with the onclick event handler. In this project you will use the onclick event handler to

automatically fill delivery address input boxes with preassigned values using the expression:

document.getElementById$(\text{'}$id$\text{'}).$value $=$ variable;

where id is the value of the id attribute of a web form element and variable is the variable value to write

into the element. A preview of the completed project is shown in Figure $1-26.$

Do the following:

$1.$ Use your code editor to open project$01-04\_$txt$.$html and project$01-04\_$txt$.$js from the js$01$ c project$04$

folder. Enter your name and the date in the comment section of each document and save them as

project$01-04.$html and project$01-04.$js$,$ respectively.

$2.$ Go to the project$01-04.$js file in your code editor. Below the comment section declare the following variables and

initial values: homeStreet $51$ Main St$.,$ homeCity $5$Sicilia$,$ homeState $5$MA$,$ homeCode $502103,$

workStreet $515$ Oak Ln$.,$ workCity $5$Central City$,$ workState $5$MA$,$ workCode $502104.$

$3.$ Close the file, saving your changes.

$4.$ Go to the project$01-04.$html file in your code editor. Directly below the closing tag insert a script

element accessing the project$01-04.$js file. Do not include the defer or async attributes so that the code in the

external file loads as the HTML is loaded.

$5.$ Directly below the closing