我刚学习JavaScript，所以请耐心等待。我想知道是否有人可以帮助我完成我的任务。在wedding.htm文件中，我创建了一个日历，当您单击选择日期框时，该日历将弹出。您可以选择日期，但必须在11月之后。我不知道为什么会这样。我需要能够在11月选择日期。点击下一个按钮后，它会进入12月，但不会再回到11月。然而，如果我点击前一个去10月，它将回到11月。我也需要帮助。
另一个问题是，我需要能够单击关闭按钮并关闭日历，但能够在单击日期框时重新打开。我发现只要是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="donations@thelighthouse.org" />
<fieldset id="contact">
<legend>Contact Information</legend>
<label class="blockLabel">
First Name <span>*</span>
<input type="text" id="firstName" name="firstName" />
</label>
<label class="blockLabel">
Last Name <span>*</span>
<input type="text" id="lastName" name="lastName" />
</label>
<label class="blockLabel">
Home Phone <span>*</span>
<input type="text" id="phone" name="phone" />
</label>
<label class="blockLabel">
Cell Phone <span>*</span>
<input type="text" id="phone" name="phone" />
</label>
<label class="blockLabel">
Street Address <span>*</span>
<input type="text" id="street" name="street" />
</label>
<label class="indentLabel">
City<span>*</span>
<input type="text" id="city" name="city" />
</label>
<label>
State<span>*</span>
<input type="text" id="state" name="state" maxlength="2" />
</label>
<label>
Zip<span>*</span>
<input type="text" id="zip" name="zip" maxlength="10" />
</label>
<label class="blockLabel">
E-Mail <span>*</span>
<input type="text" id="email" name="email" />
</label>
</fieldset>
<fieldset id="dateRequested">
<legend>Date Requested</legend>
<label class="blockLabel">Pick A Date<span>*</span>
<input type="text" id="WeddingDate" />
<div id="cal">
<div id="prev">< previous</div>
<div id="next">next ></div>
<table>
<caption></caption>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p id="close">close <span>☒</span></p>
</div>
</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>
The Lighthouse •
1000 Shore Road. •
Cape Elizabeth, ME 04107 •
(207) 799-2661
</address>
</div>
<script src="weddings.js"></script>
</body>
</html>
答案 0 :(得分：0)
您缺少额外的一行<td>代码，可以在需要它的几个月内使用。
当我加入时：
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
然后你的代码工作正常。我还建议您在displayCalendar(0);结束时致电weddings.js以初始化当月的日历。