order.html [这是一个应该使用javascript“script.js”页面填充信息的表单]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Eating Well in Season - Signup</title>
<!--
Eating Well in Season Signup page
Filename: order.html
Author: Janae Roland
Date: 11/13/17
HTML5 and CSS3 Illustrated Unit M, Independent Challenge 4
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.40753.js"></script>
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" sizes="192x192" href="android.png">
</head>
<body>
<div class="header-nav-container">
<p class="skipnavigation"><a href="contentstart">Skip navigation</a></p>
<header>
<h1>Eating Well in Season</h1>
<div>
<img src="logo.png" width="216" height="146" alt="a flower on an orange background with white letters">
</div>
</header>
<nav class="sitenavigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="sources.html">Sources</a></li>
<li><a href="menus.html">Sample Menus</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="order.html">Order</a></li>
</ul>
</nav>
</div>
<div class="article-aside-outer-container">
<div class="article-aside-inner-container">
<article id="contentstart">
<h2>Order</h2>
<form action="results.html">
<fieldset class="address-options">
<legend>Choose an address</legend>
<div class="two-column">
<input type="radio" id="homeoption" name="shippingaddress">
<label for="homeoption">Home</label>
<p>1 Main St.</p>
<p>Sicilia, ME 03900</p>
</div>
<div class="two-column">
<input type="radio" id="workoption" name="shippingaddress">
<label for="workoption">Work</label>
<p>15 Columbine Ln.</p>
<p>Crab City, ME 04993</p>
</div>
</fieldset>
<fieldset class="contact-info">
<label for="streetinput">
Street Address
<input type="text" id="streetinput" name="streetinput">
</label>
<label for="cityinput">
City
<input type="text" id="cityinput" name="cityinput">
</label>
<label for="stateinput">
State
<input type="text" id="stateinput" name="stateinput">
</label>
<label for="zipinput">
Zip
<input type="text" id="zipinput" name="zipinput">
</label>
</fieldset>
<fieldset class="submitbutton">
<input type="submit" id="submit" value="Submit">
</fieldset>
</form>
</article>
<aside>
<h2>What’s In Season</h2>
<p>Baby Carrots</p>
<p>Cardoons</p>
<p>Chard</p>
<p>Fiddleheads</p>
<p>Mint</p>
<p>Morels</p>
<p>New Potatoes</p>
<p>Ramps</p>
</aside>
</div>
</div>
<footer>
<p>Eating Well in Season • Glover, VT • (802) 555-3947</p>
</footer>
<script src="script.js"></script>
</body>
</html>
的script.js [此页面应该将地址和工作信息输入到order.html页面的联系表单中。它没有用，我已经验证了页面并修复了我能做的一切。我想知道我哪里出错了，如果有什么我需要添加到语法中。]
/* Eating Well in Season
Filename: script.js
Author: Janae Roland
Date: 11/13/17
HTML5 and CSS3 Illustrated Unit M, Independent Challenge 4*/
/* Create Variables */
var homeOption = ("#homeoption");
var workOption = ("#workoption");
var streetInput = ("#streetinput");
var cityInput = ("#cityinput");
var stateInput = ("#stateinput");
var zipInput = ("#zipinput");
/* Add Home Information */
function homeAdd () {
streetInput = "1 Main St.";
cityInput = "Sicilia";
stateInput = "ME";
zipInput = "03900";
if (form.checkValidity() === true) {
submit.Button.className = "submitbutton show";
}
}
/* Add Work Information */
function workAdd () {
streetInput = "15 Columbine Ln.";
cityInput = "Crab City";
stateInput = "ME";
zipInput = "04993";
if (form.checkValidity() === true) {
submit.Button.className = "submitbutton show";
}
/* Event Listeners */
homeOption.addEventListener("click", homeAdd, false)
workOption.addEventListener("click", workAdd, false)
答案 0 :(得分：0)
我在这里看到了多个问题：
您尚未引用任何JavaScript库，因此无法使用您的方法按ID获取元素。 （（ “#homeoption”）;）
以下代码：
var homeOption =（“＃homeoption”）;
var workOption =（“＃workoption”）;
var streetInput =（“#streetinput”）;
var cityInput =（“＃cityinput”）;
var stateInput =（“＃stateinput”）;
var zipInput =（“＃zipinput”）;`
应更改为.container {
display: flex;
justify-content: center;
min-height: 100%;
}
body, html {
background-color: seashell;
margin: 0;
height: 100%
}
您的workAdd方法缺少document.getElementById("homeoption");。
您无法直接为DOM对象赋值：
}
您应该使用streetInput = "1 Main St.";
答案 1 :(得分：0)
order.html [此文件的正确代码]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Eating Well in Season - Signup</title>
<!--
Eating Well in Season Signup page
Filename: order.html
Author: Janae Roland
Date: 11/13/17
HTML5 and CSS3 Illustrated Unit M, Independent Challenge 4
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.40753.js"></script>
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" sizes="192x192" href="android.png">
</head>
<body>
<div class="header-nav-container">
<p class="skipnavigation"><a href="contentstart">Skip navigation</a></p>
<header>
<h1>Eating Well in Season</h1>
<div>
<img src="logo.png" width="216" height="146" alt="a flower on an orange background with white letters">
</div>
</header>
<nav class="sitenavigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="sources.html">Sources</a></li>
<li><a href="menus.html">Sample Menus</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="order.html">Order</a></li>
</ul>
</nav>
</div>
<div class="article-aside-outer-container">
<div class="article-aside-inner-container">
<article id="contentstart">
<h2>Order</h2>
<form action="results.html">
<fieldset class="address-options">
<legend>Choose an address</legend>
<div class="two-column">
<input type="radio" id="homeoption" name="shippingaddress">
<label for="homeoption">Home</label>
<p>1 Main St.</p>
<p>Sicilia, ME 03900</p>
</div>
<div class="two-column">
<input type="radio" id="workoption" name="shippingaddress">
<label for="workoption">Work</label>
<p>15 Columbine Ln.</p>
<p>Crab City, ME 04993</p>
</div>
</fieldset>
<fieldset class="contact-info">
<label for="streetinput">
Street Address
<input type="text" id="streetinput" name="streetinput">
</label>
<label for="cityinput">
City
<input type="text" id="cityinput" name="cityinput">
</label>
<label for="stateinput">
State
<input type="text" id="stateinput" name="stateinput">
</label>
<label for="zipinput">
Zip
<input type="text" id="zipinput" name="zipinput">
</label>
</fieldset>
<fieldset class="submitbutton">
<input type="submit" id="submit" value="Submit">
</fieldset>
</form>
</article>
<aside>
<h2>What’s In Season</h2>
<p>Baby Carrots</p>
<p>Cardoons</p>
<p>Chard</p>
<p>Fiddleheads</p>
<p>Mint</p>
<p>Morels</p>
<p>New Potatoes</p>
<p>Ramps</p>
</aside>
</div>
</div>
<footer>
<p>Eating Well in Season • Glover, VT • (802) 555-3947</p>
</footer>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
的script.js [此文件的正确代码]
/* Eating Well in Season
Filename: script.js
Author: Janae Roland
Date: 11/13/17
HTML5 and CSS3 Illustrated Unit M, Independent Challenge 4*/
/* Create Variables */
var homeOption = document.getElementById("homeoption");
var workOption = document.getElementById("workoption");
var streetInput = document.getElementById("streetinput");
var cityInput = document.getElementById("cityinput");
var stateInput = document.getElementById("stateinput");
var zipInput = document.getElementById("zipinput");
/* Add Home Information */
function homeAdd () {
streetInput.value = "1 Main St.";
cityInput.value = "Sicilia";
stateInput.value = "ME";
zipInput.value = "03900";
/*if (form.checkValidity() === true) {
submit.Button.className = "submitbutton show";
}*/
}
/* Add Work Information */
function workAdd () {
streetInput.value = "15 Columbine Ln.";
cityInput.value = "Crab City";
stateInput.value = "ME";
zipInput.value = "04993";
/*if (form.checkValidity() === true) {
submit.Button.className = "submitbutton show";
}*/
}
/* Event Listeners */
homeOption.addEventListener("click", homeAdd, false)
workOption.addEventListener("click", workAdd, false)