Hands-On Project 1-4 You learned how to dynamically change an image using the getElementById('id').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('id').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 project01-04_txt.html and project01-04_txt.js from the HandsOnProject_01 folder. Enter your name and the date in the comment section of each document and save them as project01-04.html and project01-04.js, respectively. 2. Go to the project01-04.js file in your code editor. Below the comment section declare the following variables and initial values: homeStreet 5 “1 Main St.”, homeCity 5 “Sicilia”, homeState 5 “MA”, homeCode 5 “02103”, workStreet 5 “15 Oak Ln.”, workCity 5 “Central City”, workState 5 “MA”, workCode 5 “02104”. 3. Close the file, saving your changes. 4. Go to the project01-04.html file in your code editor. Directly below the closing tag insert a script element accessing the project01-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 tag for the Home address, insert a script element. Within the script, insert commands to write the following two lines of HTML code: homeStreet homeCity, homeState homeCode where homeStreet, homeCity, homeState, and homeCode are the variables you defined in Step 2. (Hint: You will have to use the add operator ( 1 ) to combine the variables with the literal text strings in these two lines of code.) 6. Directly below the closing tag for the Work address, insert another script element. Within the script, insert commands the write the following two lines: workStreet workCity, workState workCode where workStreet, workCity, workState, and workCode are once again the variables you defined in Step 2. 7. Go to the input element with the id “homeoption”. Within the tag insert an onclick event handler that contains the following four JavaScript commands: (a) Set the value of the of the element with the id “street” to the value of the homeStreet variable; (b) Set the value of the element with the id “city” to the homeCity variable; (c) Set the value of the element with the id “state” to the homeState variable; (d) Set the value of the element with the id “code” to the value of the homeCode variable. 8. Go to the input element with the id “workoption”. Repeat the previous step except store the values of the workStreet, workCity, workState, and workCode variables. 9. Save your changes to the file and then load project01-04.html in your web browser. Verify that the contents of the page resemble that shown in Figure 1-26 and that you can switch the address information at the bottom of the page between home and work by clicking the corresponding option buttons.   Code:            Hands-on Project 1-4                            Hands-on Project 1-4                     Shipping Address                             Choose an address                            Home                                                        Work                                                                            Street Address                                                        City                                                        State                                                        Zip

Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
icon
Related questions
Question

Hands-On Project 1-4
You learned how to dynamically change an image using the getElementById('id').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('id').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 project01-04_txt.html and project01-04_txt.js from the HandsOnProject_01 folder. Enter your name and the date in the comment section of each document and save them as project01-04.html and project01-04.js, respectively.
2. Go to the project01-04.js file in your code editor. Below the comment section declare the following variables and initial values: homeStreet 5 “1 Main St.”, homeCity 5 “Sicilia”, homeState 5 “MA”, homeCode 5 “02103”, workStreet 5 “15 Oak Ln.”, workCity 5 “Central City”, workState 5 “MA”, workCode 5 “02104”.
3. Close the file, saving your changes.
4. Go to the project01-04.html file in your code editor. Directly below the closing </head> tag insert a script element accessing the project01-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 </div> tag for the Home address, insert a script element. Within the script, insert commands to write the following two lines of HTML code:
homeStreet <br>
homeCity, homeState homeCode
where homeStreet, homeCity, homeState, and homeCode are the variables you defined in Step 2. (Hint: You will have to use the add operator ( 1 ) to combine the variables with the literal text strings in these two lines of code.)
6. Directly below the closing </div> tag for the Work address, insert another script element. Within the script, insert commands the write the following two lines:
workStreet <br>
workCity, workState workCode
where workStreet, workCity, workState, and workCode are once again the variables you defined in Step 2.
7. Go to the input element with the id “homeoption”. Within the <input> tag insert an onclick event handler that contains the following four JavaScript commands: (a) Set the value of the of the element with the id “street” to the value of the homeStreet variable; (b) Set the value of the element with the id “city” to the homeCity variable; (c) Set the value of the element with the id “state” to the homeState variable; (d) Set the value of the element with the id “code” to the value of the homeCode variable.
8. Go to the input element with the id “workoption”. Repeat the previous step except store the values of the workStreet, workCity, workState, and workCode variables.
9. Save your changes to the file and then load project01-04.html in your web browser. Verify that the contents of the page resemble that shown in Figure 1-26 and that you can switch the address information at the bottom of the page between home and work by clicking the corresponding option buttons.

 

Code:

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>Hands-on Project 1-4</title>
   <link rel="stylesheet" href="styles.css" />
   <!--
      JavaScript
      Hands-on Project 1-4

      Author:
      Date:  

      Filename: index.htm
   -->
</head>

<body>
   <header>
      <h1>
         Hands-on Project 1-4
      </h1>
   </header>

   <article>
      <h2>Shipping Address</h2>
      <form>

         <fieldset id="addroptions">
            <legend><span>Choose an address</span></legend>
            <label for="homeoption" id="homeaddr">
               <div>Home</div>
               <input type="radio" id="homeoption" name="shippingaddr" />
            </label>
            <label for="workoption" id="workaddr">
               <div>Work</div>
               <input type="radio" id="workoption" name="shippingaddr" />
            </label>
         </fieldset>


         <fieldset id="contactinfo">
            <label for="street">
               Street Address
               <input type="text" id="street" />
            </label>
            <label for="city">
               City
               <input type="text" id="city" />
            </label>
            <label for="state">
               State
               <input type="text" id="state" />
            </label>
            <label for="code">
               Zip
               <input type="text" id="code" />
            </label>
         </fieldset>

      </form>
   </article>
   <script>

   </script>

</body>

</html>
Hands-on Project 1-4
Shipping Address
Choose an address
● Home
1 Main St.
Sicilia, MA 02103
O Work
MA
02104
15 Oak Ln.
Central City, MA 02104
Street Address 15 Oak Ln.
City
Central City
State
Zip
Figure 1-26 Completed Project 1-4
Transcribed Image Text:Hands-on Project 1-4 Shipping Address Choose an address ● Home 1 Main St. Sicilia, MA 02103 O Work MA 02104 15 Oak Ln. Central City, MA 02104 Street Address 15 Oak Ln. City Central City State Zip Figure 1-26 Completed Project 1-4
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 3 steps

Blurred answer
Knowledge Booster
Form and its Elements
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education