現在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>•</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);
}