我正在尝试创建一个 javascript 页面以将信息输入到表单中，但它不起作用

debugcn 发表于 Dev

用户8967855

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&rsquo;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 &bull; Glover, VT &bull; (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)

苏尼尔

我在这里看到多个问题：

您尚未引用任何 JavaScript 库，因此无法使用您的方法通过 Id 获取元素。(("#homeoption");)
以下代码：

var homeOption = ("#homeoption");

var workOption = ("#workoption");

var streetInput = ("#streetinput");

var cityInput = ("#cityinput");

var stateInput = ("#stateinput");

var zipInput = ("#zipinput");`

应该改为 document.getElementById("homeoption");