in the following javascript code input the following codes into the code below <
ID: 3859197 • Letter: I
Question
in the following javascript code input the following codes into the code below
<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 6th Edition
Chapter 1
Hands-on Project 1-4
Author:
Date:
Filename: index.htm
-->
<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" />
</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">
<span>Home</span><br/>
1 Main St.<br />
Sicilia, MA 02103
<input type="radio" id="homeoption" name="shippingaddr" />
</label>
<label for="workoption" id="workaddr">
<span>Work</span><br/>
15 Columbine Ln.<br />
Crab City, MA 02104
<input type="radio" id="workoption" name="shippingaddr" />
</label>
</fieldset>
<fieldset id="contactinfo">
<label for="streetinput">
Street Address
<input type="text" id="streetinput" />
</label>
<label for="cityinput">
City
<input type="text" id="cityinput" />
</label>
<label for="stateinput">
State
<input type="text" id="stateinput" />
</label>
<label for="zipinput">
Zip
<input type="text" id="zipinput" />
</label>
</fieldset>
</form>
</article>
</body>
</html>
1. Just above the closing tag, add the following element to link the file containing the Modernizr library:
<script src="modernizr.custom.05819.js"></script>
2. locate the first fieldset element, with the id addroptions, and then find the first input element, with the id homeoption. Within the input element that creates the first option button, add the following event handler:
onclick="document.getElementById('streetinput').value = 2 '1 Main St.';
document.getElementById('cityinput').value = 4 'Sicilia';
document.getElementById('stateinput').value = 'MA';
document.getElementById('zipinput').value = '02103';"
3. Within the same fieldset element, locate the second input element, with the id workoption. Within the input element that creates the second option button, add the following event handler:
onclick="document.getElementById('streetinput').value = '15 2 Columbine Ln.';
document.getElementById('cityinput').value = 'Crab 4 City';
document.getElementById('stateinput').value = 'MA';
document.getElementById('zipinput').value = '02104';"
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 6th Edition
Chapter 1
Hands-on Project 1-4
Author:
Date:
Filename: index.htm
-->
<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" />
<script src="modernizr.custom.05819.js"></script>
</head>
<body>
<script>
function showButton(value)
{
document.getElementById('streetinput').value = "";
document.getElementById('cityinput').value = "";
document.getElementById('stateinput').value = "";
document.getElementById('zipinput').value = "";
if(value.id == "homeoption")
{
document.getElementById("firstoption").style.display="block";
document.getElementById("secondoption").style.display="none";
}
if(value.id == "workoption")
{
document.getElementById("secondoption").style.display="block";
document.getElementById("firstoption").style.display="none";
}
}
function fillDetails(value)
{
if(value.id == "firstoption")
{
document.getElementById('streetinput').value = "2 1 Main St.";
document.getElementById('cityinput').value = "4 Sicilia";
document.getElementById('stateinput').value = "MA";
document.getElementById('zipinput').value = "02103";
}
if(value.id == "secondoption")
{
document.getElementById('streetinput').value = "15 2 Columbine Ln.";
document.getElementById('cityinput').value = "Crab 4 City";
document.getElementById('stateinput').value = "MA";
document.getElementById('zipinput').value = "02104";
}
}
</script>
<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">
<span>Home</span><br/>
1 Main St.<br />
Sicilia, MA 02103
<input type="radio" id="homeoption" name="shippingaddr"/>
<button type="button" id="firstoption">FirstOption</button>
</label>
<label for="workoption" id="workaddr">
<span>Work</span><br/>
15 Columbine Ln.<br />
Crab City, MA 02104
<input type="radio" id="workoption" name="shippingaddr"/>
<button type="button" id="secondoption">SecondOption</button>
</label>
</fieldset>
<fieldset id="contactinfo">
<label for="streetinput">
Street Address
<input type="text" id="streetinput" />
</label>
<label for="cityinput">
City
<input type="text" id="cityinput" />
</label>
<label for="stateinput">
State
<input type="text" id="stateinput" />
</label>
<label for="zipinput">
Zip
<input type="text" id="zipinput" />
</label>
</fieldset>
</form>
</article>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.