0

現在JAvaScriptを利用してデリバリーのフォームを作成しています。DeliveryDateの日付指定の欄で、1.4.6.8.10.12月は31日まで表示、うるう年の2月は29日まで表示というような挙動をさせたいのですがどこのコードが間違えているのかがわかりません。要因及び解決法をご回答いただきたいです。また、このような問題の要因をどのように発見しているのかも併せて教えていただきたいです。以下がhtml及びJavaScriptのコードです。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=page-width, initial-scale=1.0">
   <title>Snoot Flowers - Order</title>
   <link rel="stylesheet" href="snoot.css" />
   <link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
   <script src="modernizr.custom.65897.js"></script>
</head>

<body>
   <div class="container">
      <header>
         <h1>
            Snoot Flowers
         </h1>
      </header>

      <nav>
         <ul>
            <li><a href="#">Floral Arrangements</a></li>
            <li><a href="#">Seasonal Bouquets</a></li>
            <li><a href="#">Live Plants</a></li>
            <li><a href="#">Shop by Price</a></li>
         </ul>
      </nav>
   </div>

   <article>
      <h2>Place an Order</h2>
      <div id="errorText"></div>
      <form action="results.htm">
         <fieldset id="message" class="checks">
            <legend>Message</legend>
            <input id="congrats" name="Congratulations" type="checkbox" />
            <label for="congrats">Congratulations!</label>
            <input id="bday" name="HappyBirthday" type="checkbox" />
            <label for="bday">Happy Birthday!</label>
            <input id="anniv" name="HappyAnniversary" type="checkbox" />
            <label for="anniv">Happy Anniversary!</label>
            <input id="love" name="ILoveYou" type="checkbox" />
            <label for="love">I love you!</label>
            <input id="custom" name="CustomMessage" type="checkbox" />
            <label for="custom">Custom message:</label>
            <textarea id="customText" name="CustomText" placeholder="Enter custom message here (max 250 characters)"></textarea>
            <div class="errorMessage"></div>
          </fieldset>
         <fieldset id="billingAddress" class="text">
            <legend>Billing Address</legend>
            <label for="billFName">First Name</label>
            <input id="billFName" name="BillingFirstName" type="text" required="required" />
            <label for="billLName">Last Name</label>
            <input id="billLName" name="BillingLastName" type="text" required="required" />
            <label for="billStreet">Street Address</label>
            <input id="billStreet" name="BillingStreet" type="text" required="required" />
            <label for="billCity">City</label>
            <input id="billCity" name="BillingCity" type="text" required="required" />
            <label for="billState">State</label>
            <select id="billState" name="BillingState" required="required">
               <option value="AL">AL</option>
               <option value="AK">AK</option>
               <option value="AZ">AZ</option>
               <option value="AR">AR</option>
               <option value="CA">CA</option>
               <option value="CO">CO</option>
               <option value="CT">CT</option>
               <option value="DE">DE</option>
               <option value="DC">DC</option>
               <option value="FL">FL</option>
               <option value="GA">GA</option>
               <option value="HI">HI</option>
               <option value="ID">ID</option>
               <option value="IL">IL</option>
               <option value="IN">IN</option>
               <option value="IA">IA</option>
               <option value="KS">KS</option>
               <option value="KY">KY</option>
               <option value="LA">LA</option>
               <option value="ME">ME</option>
               <option value="MD">MD</option>
               <option value="MA">MA</option>
               <option value="MI">MI</option>
               <option value="MN">MN</option>
               <option value="MS">MS</option>
               <option value="MO">MO</option>
               <option value="MT">MT</option>
               <option value="NE">NE</option>
               <option value="NV">NV</option>
               <option value="NH">NH</option>
               <option value="NJ">NJ</option>
               <option value="NM">NM</option>
               <option value="NY">NY</option>
               <option value="NC">NC</option>
               <option value="ND">ND</option>
               <option value="OH">OH</option>
               <option value="OK">OK</option>
               <option value="OR">OR</option>
               <option value="PA">PA</option>
               <option value="RI">RI</option>
               <option value="SC">SC</option>
               <option value="SD">SD</option>
               <option value="TN">TN</option>
               <option value="TX">TX</option>
               <option value="UT">UT</option>
               <option value="VT">VT</option>
               <option value="VA">VA</option>
               <option value="WA">WA</option>
               <option value="WV">WV</option>
               <option value="WI">WI</option>
               <option value="WY">WY</option>
            </select>
            <label for="billZip">Zip</label>
            <input id="billZip" name="BillingZip" type="number" required="required" />
            <label for="billPhone">Phone</label>
            <input id="billPhone" name="BillingPhone" type="number" required="required" />
            <div class="errorMessage"></div>
         </fieldset>
         <fieldset id="deliveryAddress" class="text">
            <legend>Delivery Address</legend>
            <div class="checks">
               <input id="sameAddr" name="SameAddress" type="checkbox" />
               <label for="sameAddr">same as billing address</label>
            </div>
            <label for="delivFName">First Name</label>
            <input id="delivFName" name="DeliveryFirstName" type="text" required="required" />
            <label for="delivLName">Last Name</label>
            <input id="delivLName" name="DeliveryLastName" type="text" required="required" />
            <label for="delivStreet">Street Address</label>
            <input id="delivStreet" name="DeliveryStreet" type="text" required="required" />
            <label for="delivCity">City</label>
            <input id="delivCity" name="DeliveryCity" type="text" required="required" />
            <label for="delivState">State</label>
            <select id="delivState" name="DeliveryState" required="required">
               <option value="AL">AL</option>
               <option value="AK">AK</option>
               <option value="AZ">AZ</option>
               <option value="AR">AR</option>
               <option value="CA">CA</option>
               <option value="CO">CO</option>
               <option value="CT">CT</option>
               <option value="DE">DE</option>
               <option value="DC">DC</option>
               <option value="FL">FL</option>
               <option value="GA">GA</option>
               <option value="HI">HI</option>
               <option value="ID">ID</option>
               <option value="IL">IL</option>
               <option value="IN">IN</option>
               <option value="IA">IA</option>
               <option value="KS">KS</option>
               <option value="KY">KY</option>
               <option value="LA">LA</option>
               <option value="ME">ME</option>
               <option value="MD">MD</option>
               <option value="MA">MA</option>
               <option value="MI">MI</option>
               <option value="MN">MN</option>
               <option value="MS">MS</option>
               <option value="MO">MO</option>
               <option value="MT">MT</option>
               <option value="NE">NE</option>
               <option value="NV">NV</option>
               <option value="NH">NH</option>
               <option value="NJ">NJ</option>
               <option value="NM">NM</option>
               <option value="NY">NY</option>
               <option value="NC">NC</option>
               <option value="ND">ND</option>
               <option value="OH">OH</option>
               <option value="OK">OK</option>
               <option value="OR">OR</option>
               <option value="PA">PA</option>
               <option value="RI">RI</option>
               <option value="SC">SC</option>
               <option value="SD">SD</option>
               <option value="TN">TN</option>
               <option value="TX">TX</option>
               <option value="UT">UT</option>
               <option value="VT">VT</option>
               <option value="VA">VA</option>
               <option value="WA">WA</option>
               <option value="WV">WV</option>
               <option value="WI">WI</option>
               <option value="WY">WY</option>
            </select>
            <label for="delivZip">Zip</label>
            <input id="delivZip" name="DeliveryZip" type="number" required="required" />
            <label for="delivPhone">Phone</label>
            <input id="delivPhone" name="DeliveryPhone" type="number" required="required" />
            <div class="errorMessage"></div>
         </fieldset>
         <fieldset id="deliveryDate" class="checks">
            <legend>Delivery Date</legend>
            <div class="inline" id="delivDate">
               <select id="delivMo" name="DelivMonth" required="required">
                  <option value="1">January</option>
                  <option value="2">February</option>
                  <option value="3">March</option>
                  <option value="4">April</option>
                  <option value="5">May</option>
                  <option value="6">June</option>
                  <option value="7">July</option>
                  <option value="8">August</option>
                  <option value="9">September</option>
                  <option value="10">October</option>
                  <option value="11">November</option>
                  <option value="12">December</option>
               </select>
               <select id="delivDy" name="DelivDay" required="required">
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
                  <option value="13">13</option>
                  <option value="14">14</option>
                  <option value="15">15</option>
                  <option value="16">16</option>
                  <option value="17">17</option>
                  <option value="18">18</option>
                  <option value="19">19</option>
                  <option value="20">20</option>
                  <option value="21">21</option>
                  <option value="22">22</option>
                  <option value="23">23</option>
                  <option value="24">24</option>
                  <option value="25">25</option>
                  <option value="26">26</option>
                  <option value="27">27</option>
                  <option value="28">28</option>
                  <option value="29">29</option>
                  <option value="30">30</option>
                  <option value="31">31</option>
               </select>
               <select id="delivYr" name="DelivYear" required="required">
                  <option value="2017">2017</option>
                  <option value="2018">2018</option>
                  <option value="2019">2019</option>
                  <option value="2020">2020</option>
                  <option value="2021">2021</option>
                  <option value="2022">2022</option>
               </select>
            </div>
            <div class="errorMessage"></div>
         </fieldset>
         <fieldset id="paymentInfo" class="text">
            <legend>Payment</legend>
            <div id="cards" class="inline">
               <input id="visa" name="PaymentType" type="radio" value="Visa" />
               <label for="visa">Visa</label>
               <input id="mc" name="PaymentType" type="radio" value="MC" />
               <label for="mc">Master Card</label>
               <input id="discover" name="PaymentType" type="radio" value="Discover" />
               <label for="discover">Discover</label>
               <input id="amex" name="PaymentType" type="radio" value="AmEx" />
               <label for="amex">American Express</label>
            </div>
            <div>
               <label for="ccNum">Card #</label>
               <input id="ccNum" name="CardNumber" type="number" required="required" />
               <div id="ccNumErrorMessage"></div>
            </div>
            <div>
               <label>Expiration</label>
               <div class="inline" id="exp">
                  <label for="expMo" id="expMoLabel">Expiration Month</label>
                  <select id="expMo" name="ExpMonth" required="required">
                     <option value="01">01</option>
                     <option value="02">02</option>
                     <option value="03">03</option>
                     <option value="04">04</option>
                     <option value="05">05</option>
                     <option value="06">06</option>
                     <option value="07">07</option>
                     <option value="08">08</option>
                     <option value="09">09</option>
                     <option value="10">10</option>
                     <option value="11">11</option>
                     <option value="12">12</option>
                  </select>
                  <label for="expYr" id="expYrLabel">Expiration Year</label>
                  <select id="expYr" name="ExpYear" required="required">
                     <option value="2017">2017</option>
                     <option value="2018">2018</option>
                     <option value="2019">2019</option>
                     <option value="2020">2020</option>
                     <option value="2021">2021</option>
                  </select>
               </div>
               <label for="cvv">CVV</label>
               <input id="cvv" name="CVVValue" type="number" required="required" />
               <div id="cvvErrorMessage"></div>
            </div>
            <div class="errorMessage"></div>
         </fieldset>
         <fieldset id="createAccount" class="text">
            <legend>Create Account?</legend>
            <p>To be able to access your purchase history and make changes to your order, enter a name and password to create an account.</p>
            <label for="username">Username</label>
            <input id="username" name="NewUsername" type="text" />
            <label for="pass1">Password</label>
            <input id="pass1" name="Password1" type="password" />
            <label for="pass2">Password (verify)</label>
            <input id="pass2" name="Password2" type="password" />
            <div class="errorMessage"></div>
         </fieldset>
         <div id="buttonContainer">
            <input type="submit" value="Place Order" id="orderButton" />
         </div>
      </form>
   </article>
   <footer>Snoot Flowers <span>&bull;</span> Davenport, Iowa</footer>
   <script src="snoot1.js"></script>
</body>
</html>
"use strict"; //interpret document contents in JavaScript strict mode

/* global variables */
var twentyNine = document.createDocumentFragment();
var thirty = document.createDocumentFragment();
var thirtyOne = document.createDocumentFragment();

/* set up node building blocks for selection list of days */

function setupDays() {

  var dates = document.getElementById("delivDy").getElementsByTagName("option");

  //default is 1..28, index 0..27
  twentyNine.appendChild(dates[28].cloneNode(true)); // add 29th

  thirty.appendChild(dates[28].cloneNode(true));
  thirty.appendChild(dates[29].cloneNode(true)); // add 29th & 30th

  thirtyOne.appendChild(dates[28].cloneNode(true));
  thirtyOne.appendChild(dates[29].cloneNode(true));
  thirtyOne.appendChild(dates[30].cloneNode(true)); // add 29th, 30th, 31st
}

function updateDays() {
  var deliveryDay = document.getElementById("delivDy");
  var dates = deliveryDay.getElementsByTagName("option");
  var deliveryMonth = document.getElementById("delivMo");
  var deliveryYear = document.getElementById("delivYr");
 var selectedMonth = deliveryMonth.options[deliveryMonth.selectedIndex].value;

 while (dates[28]) {
   // remove child with index of 28 until this index is empty
   deliveryDay.removeChild(dates[28]);
 }
 if (deliveryYear.selectedIndex === -1) {
   //if no year is selected, choose the first year
   deliveryYear.selectedIndex = 0;
 }
}

 if (selectedMonth === "2" &&
   deliveryYear.options[deliveryYear.selectedIndex].value === "2020") {
   // if leap year, Feb has 29 days
   deliveryDay.appendChild(twentyNine.cloneNode(true));

 }

 //Thirty days have November, April, June, and September
 // 4 6, 9 and 11
 else if (selectedMonth === "4" || selectedMonth === "6" || selectedMonth === "9" || selectedMonth === "11") {
   // these months have 30 days
   deliveryDay.appendChild(thirty.cloneNode(true));
 } else if (selectedMonth === "1" || selectedMonth === "3" || selectedMonth === "5" || selectedMonth === "7" || selectedMonth === "8" || selectedMonth === "10" || selectedMonth === "12") {
   // these months have 31 days
   deliveryDay.appendChild(thirtyOne.cloneNode(true));
 } //switch looks good here

 /*remove default values and formatting from state and delivery date selection lists */
 function removeSelectDefaults() { /*state.deliveryの欄の初期値を削除*/
   var emptyBoxes = document.getElementsByTagName("select");
   for (var i = 0; i < emptyBoxes.length; i++){
     emptyBoxes[i].selectedIndex = -1; /*select欄を埋めない限り動作が繰り返される*/
   }
 }

 /*create event Listeners*/
 function createEventListeners(){
   var deliveryMonth =document.getElementById("delivMo");
   if(deliveryMonth.addEventListener){
     deliveryMonth.addEventListener("change", updateDays, false);
   } else if (deliveryMonth.attachEvent) {
     deliveryMonth.attachEvent("onchange", updateDays);
   }
  //we are doing same task more than once it should be a fucntion

  var deliveryYear = document.getElementById("delivYr");
  if (deliveryYear.addEventListener) {
    deliveryYear.addEventListener("change", updateDays, false);
  } else if (deliveryYear.attachEvent) {
    deliveryYear.attachEvent("onchange", updateDays);
  }
}

  /* run initial form configuration functions */
  function setupPage() {
    removeSelectDefaults();
    setUpDays();
    createEventListeners();
  }

/*run setup function when page finishes loading. */
if(window.addEventListener){
  window.addEventListener("load",setUpPage, false);
} else if (window.attachEvent){
  window.attachEvent("onload", setUpPage);
}

1 件の回答 1

1

解決法

ローカル変数 selectedMonth のスコープから考えて '}' の位置がずれてます、それに伴ってインデントも調整した方が良いでしょう。
function setupDays() で定義して setUpDays で呼んでいる (大文字小文字が違う)
function setupPage() で定義して setUpPage で呼んでいる (大文字小文字が違う)
これでブラウザ上のエラーは無くなって日付の動作も出来ているように見えます。  

--- snoot1_org.js
+++ snoot1.js
@@ -39,3 +39,2 @@
  }
-}

@@ -57,2 +56,3 @@
  } //switch looks good here
+}

@@ -87,3 +87,3 @@
     removeSelectDefaults();
-    setUpDays();
+    setupDays();
     createEventListeners();
@@ -93,3 +93,3 @@
 if(window.addEventListener){
-  window.addEventListener("load", setUpPage, false);
+  window.addEventListener("load", setupPage, false);
 } else if (window.attachEvent){

発見方法

ブラウザの開発ツールからコンソールタブを開くとエラーメッセージが確認できます、
他に console.log('Test point 001'); などと埋め込んで動作を確認するとか。

1
  • 無事動きました。ありがとうございます‼
    – Suzu
    Commented 2021年11月12日 20:37

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。