-1
私はJavaScriptを勉強したばかりですので、私にご負担ください。私は私が持っている仕事で誰かが私を助けることができるかどうか疑問に思っていました。 wedding.htmファイルでは、日付の選択ボックスをクリックすると開いたカレンダーを作成しました。日付は選択できますが、11月以降でなければなりません。なぜそれがこれを行うのか分かりません。私は11月にも日付を選択できる必要があります。次のボタンをクリックすると、12月に進みますが、11月には戻りません。しかし、10月に行くために前をクリックすると、11月に戻ります。私もそれに助けが必要です。JavaScriptファイルに問題があります
もう1つの問題は、閉じるボタンをクリックしてカレンダーを閉じる必要がありますが、日付ボックスをクリックして再び開くことができることです。私は、12月の日付である限り、日付を選択するか閉じるボタンをクリックした後にカレンダーを閉じることができることを発見しました。私はこのコードからこれらの問題を引き起こしていると思われるエラーメッセージ"Uncaught TypeError: Cannot set property 'innerHTML' of undefined"を得ます：dateCells[i].innerHTML = dateObject.getDate();。
"use strict"; // interpret contents in JavaScript strict mode
var dateObject = new Date();
function displayCalendar(whichMonth) {
var date;
var dateToday = new Date();
var dayOfWeek;
var daysInMonth;
var dateCells;
var captionValue;
var month;
var year;
var monthArray = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
if (whichMonth === -1) {
dateObject.setMonth(dateObject.getMonth() - 1);
} else if (whichMonth === 1) {
dateObject.setMonth(dateObject.getMonth() + 1);
}
month = dateObject.getMonth();
year = dateObject.getFullYear();
dateObject.setDate(1);
dayOfWeek = dateObject.getDay();
captionValue = monthArray[month] + " " + year;
document.querySelector("#cal table caption").innerHTML = captionValue;
if (month === 0 || month === 2 || month === 4 || month === 6 || month === 7 || month === 9 || month === 11) {
// Jan, Mar, May, Jul, Aug, Oct, Dec
daysInMonth = 31;
} else if (month === 1) { // Feb
if (year % 4 === 0) { // leap year test
if (year % 100 === 0) {
// year ending in 00 not a leap year unless
// divisible by 400
if (year % 400 === 0) {
daysInMonth = 29;
} else {
daysInMonth = 28;
}
} else {
daysInMonth = 29;
}
} else {
daysInMonth = 28;
}
} else { // Apr, Jun, Sep, Nov
daysInMonth = 30;
}
dateCells = document.getElementsByTagName("td");
for (var i = 0; i < dateCells.length; i++) {
// clear existing table dates
dateCells[i].innerHTML = "";
dateCells[i].className = "";
}
for (var i = dayOfWeek; i < daysInMonth + dayOfWeek; i++) {
// add dates to days cells
dateCells[i].innerHTML = dateObject.getDate();
dateCells[i].className = "date";
if (dateToday < dateObject) {
dateCells[i].className = "futuredate";
}
date = dateObject.getDate() + 1;
dateObject.setDate(date);
}
dateObject.setMonth(dateObject.getMonth() - 1);
// reset month to month shown
document.getElementById("cal").style.display = "block";
// display calendar if it’s not already visible
}
function selectDate(event) {
if (event === undefined) { // get caller element in IE8
event = window.event;
}
var callerElement = event.target || event.srcElement;
if (callerElement.innerHTML === "") {
// cell contains no date, so don’t close the calendar
document.getElementById("cal").style.display = "block";
return false;
}
dateObject.setDate(callerElement.innerHTML);
var fullDateToday = new Date();
var dateToday = Date.UTC(fullDateToday.getFullYear(),
fullDateToday.getMonth(), fullDateToday.getDate());
var selectedDate = Date.UTC(dateObject.getFullYear(),
dateObject.getMonth(), dateObject.getDate());
if (selectedDate <= dateToday) {
document.getElementById("cal").style.display = "block";
return false;
}
document.getElementById("WeddingDate").value = dateObject.toLocaleDateString();
hideCalendar();
}
function hideCalendar() {
document.getElementById("cal").style.display = "none";
}
function prevMo() {
displayCalendar(-1);
}
function nextMo() {
displayCalendar(1);
}
function createEventListeners() {
var dateField = document.getElementById("WeddingDate");
if (dateField.addEventListener) {
dateField.addEventListener("click", displayCalendar, false);
} else if (dateField.attachEvent) {
dateField.attachEvent("onclick", displayCalendar);
}
var dateCells = document.getElementsByTagName("td");
if (dateCells[0].addEventListener) {
for (var i = 0; i < dateCells.length; i++) {
dateCells[i].addEventListener("click", selectDate, false);
}
} else if (dateCells[0].attachEvent) {
for (var i = 0; i < dateCells.length; i++) {
dateCells[i].attachEvent("onclick", selectDate);
}
}
var closeButton = document.getElementById("close");
if (closeButton.addEventListener) {
closeButton.addEventListener("click", hideCalendar, false);
} else if (closeButton.attachEvent) {
closeButton.attachEvent("onclick", hideCalendar);
}
var prevLink = document.getElementById("prev");
var nextLink = document.getElementById("next");
if (prevLink.addEventListener) {
prevLink.addEventListener("click", prevMo, false);
nextLink.addEventListener("click", nextMo, false);
} else if (prevLink.attachEvent) {
prevLink.attachEvent("onclick", prevMo);
nextLink.attachEvent("onclick", nextMo);
}
}
if (window.addEventListener) {
window.addEventListener("load", createEventListeners, false);
} else if (window.attachEvent) {
window.attachEvent("onload", createEventListeners);
}<title>The Lighthouse - Weddings</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="forms.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="head"><img src="lhouse.jpg" alt="The Lighthouse" /></div>
<div id="nav">
<ul>
<li><a href="index.htm">home</a></li>
<li><a href="upcomingEvents.htm">upcoming events</a></li>
<li><a href="weddings.htm">weddings</a></li>
<li><a href="donations.htm">donations</a></li>
<li><a href="directions.htm">directions</a></li>
</ul>
</div>
<div id="mainContent">
<div id="leftColumn">
<p>Individuals desiring to schedule a wedding cermony should fill out the form to the left. A reservation is not placed on the calendar (schedule) until there has been approval of the site and payment received. There is Non-Refundable fee of $175.00
</p>
<br />
<p> We will contact you to verify your information and schedule your event.
</p>
<br />
<p> <img src="wedding.png"></img>
</p>
</div>
<div id="rightColumn">
<h1>Wedding Application</h1>
<p><span>*</span> indicates required information</p>
<form name="donationForm" id="donationForm" action="http://www.thelighthours.org/cgi-bin/donation" method="post">
<input type="hidden" name="eMail" id="eMail" value="[email protected]" />
<fieldset id="contact">
<legend>Contact Information</legend>
<label class="blockLabel">
\t \t \t \t First Name <span>*</span>
\t \t \t \t <input type="text" id="firstName" name="firstName" />
\t \t \t </label>
<label class="blockLabel">
\t \t \t \t Last Name <span>*</span>
\t \t \t \t <input type="text" id="lastName" name="lastName" />
\t \t \t </label>
<label class="blockLabel">
\t \t \t \t Home Phone <span>*</span>
\t \t \t \t <input type="text" id="phone" name="phone" />
\t \t \t </label>
<label class="blockLabel">
\t \t \t \t Cell Phone <span>*</span>
\t \t \t \t <input type="text" id="phone" name="phone" />
\t \t \t </label>
<label class="blockLabel">
\t \t \t \t Street Address <span>*</span>
\t \t \t \t <input type="text" id="street" name="street" />
\t \t \t </label>
<label class="indentLabel">
\t \t \t \t City<span>*</span>
\t \t \t \t <input type="text" id="city" name="city" />
\t \t \t </label>
<label>
\t \t \t \t State<span>*</span>
\t \t \t \t <input type="text" id="state" name="state" maxlength="2" />
\t \t \t </label>
<label>
\t \t \t \t Zip<span>*</span>
\t \t \t \t <input type="text" id="zip" name="zip" maxlength="10" />
\t \t \t </label>
<label class="blockLabel">
\t \t \t \t E-Mail <span>*</span>
\t \t \t \t <input type="text" id="email" name="email" />
\t \t \t </label>
</fieldset>
<fieldset id="dateRequested">
<legend>Date Requested</legend>
<label class="blockLabel">Pick A Date<span>*</span>
\t \t \t <input type="text" id="WeddingDate" />
\t \t <div id="cal">
\t \t \t \t <div id="prev">< previous</div>
\t \t \t \t <div id="next">next ></div>
\t \t \t \t <table>
\t \t \t \t <caption></caption>
\t \t \t \t <tr>
\t \t \t \t \t <th>Sun</th>
\t \t \t \t \t <th>Mon</th>
\t \t \t \t \t <th>Tue</th>
\t \t \t \t \t <th>Wed</th>
\t \t \t \t \t <th>Thu</th>
\t \t \t \t \t <th>Fri</th>
\t \t \t \t \t <th>Sat</th>
\t \t \t \t </tr>
<tr>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t </tr>
\t \t \t \t <tr>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t \t <td></td>
\t \t \t \t </tr> \t \t \t \t
\t \t \t \t </table>
\t \t \t <p id="close">close <span>☒</span></p>
\t \t </div>
\t \t </label>
</fieldset>
<fieldset id="location">
<legend>Location</legend>
<input type="radio" id="thegreen" name="loc" />
<label for="thegreen" id="greenLabel">The Green</label>
<input type="radio" id="shipcove" name="loc" />
<label for="shipcove" id="shipcoveLabel">The Ship Cove Picnic Area</label>
<input type="radio" id="cliffside" name="loc" />
<label for="cliffside" id="cliffsideLabel">The Cliffside Area</label>
<label for="comments" class="blockLabel">Comments</label>
<textarea id="comments" name="comments" rows="5" cols="50"></textarea>
</fieldset>
<input type="submit" value="Submit" />
<input type="reset" value="Cancel" />
</form>
</div>
<address>
\t \t \t The Lighthouse •
\t \t \t 1000 Shore Road. •
\t \t \t Cape Elizabeth, ME 04107 •
\t \t \t (207) 799-2661
\t \t </address>
</div>
<script src="weddings.js"></script>
</body>
</html>
あなたは[mcve]を作ってください。 –
下記の私の答えを見てください。特別なセットの ''タグがありませんでした。 – Intervalia