我对 javascript 和 html 还很陌生，并且在构建日历时遇到了麻烦。我已经在 javascript 中创建了应该创建日历的函数，但由于某种原因，当我尝试在 HTML 中使用它们时，我在 javascript 文件中定义的 javascript 函数无法被识别。
我不断收到 HTML 代码中未定义“Calendar()”的错误。
HTML 代码:
<html>
{% extends "layout.html" %}
{% block title %}
Index
{% endblock %}
{% block main %}
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- Dynamically create the calendar -->
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript">
var cal = Calendar();
return cal.drawCalendar();
</script>
</head>
<body>
<!-- Create the calendar object -->
<table class="calendar">
<tr>
<th class="header" colspan="7"></th>
</tr>
<tr>
<td class="headerdays">Sun</td>
<td class="headerdays">Mon</td>
<td class="headerdays">Tue</td>
<td class="headerdays">Wed</td>
<td class="headerdays">Thu</td>
<td class="headerdays">Fri</td>
<td class="headerdays">Sat</td>
</tr>
<tr class ="days">
</tr>
</table>
<!-- Add buttons to change the calendar month -->
<button class="calButton" onclick="cal.prevMonth()"><span> Prev </span></button>
<button class="calButton" onclick="cal.nextMonth()"><span> Next </span></button>
</body>
{% endblock %}
</html>
Javascript代码:
// these are labels for the days of the week
cal_days_labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
// these are months in order
cal_months_labels = ['January', 'February', 'March', 'April',
'May', 'June', 'July', 'August', 'September',
'October', 'November', 'December'];
// these are the days in each month in order
cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// this is the current date
cal_current_date = new Date();
//Constructor function for Calendar
function Calendar(month, year)
{
this.month = (isNaN(month) || month == null) ? cal_current_date.getMonth() : month;
this.year = (isNaN(year) || year == null) ? cal_current_date.getFullYear() : year;
}
//Generates the needed HTML for the calendar
Calendar.prototype.generateHTML = function()
{
// get first day of month
var firstDay = new Date(this.year, this.month, 1);
var startingDay = firstDay.getDay();
// find number of days in month
var monthLength = cal_days_in_month[this.month];
// Compensate for leap year
if (this.month == 1)
{
if((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0)
{
monthLength = 29;
}
}
// Fill in month and year for header
var monthName = cal_months_labels[this.month];
window.getElementsByClassName("header")[0].innerHTML = monthName + " " + this.year;
// fill in the days
var html = html + '';
var day = 1;
// this loop is for is weeks (rows)
for (var i = 0; i < 9; i++)
{
html += '<tr>';
// this loop is for weekdays (cells)
for (var j = 0; j <= 6; j++)
{
html += '<td class="day">';
if (day <= monthLength && (i > 0 || j >= startingDay))
{
html += day;
day++;
}
html += '</td>';
}
html += '</tr>';
// stop making rows if we've run out of days
if (day > monthLength)
{
break;
}
}
//Write the days to the screen
window.getElementsByClassName("days")[0].innerHTML = html;
};
//Writes the calendar to the screen
Calendar.prototype.drawCalendar = function()
{
//Generates the HTML and write HTML to screen
this.generateHTML();
};
//Sets the calendar to previous month
Calendar.prototype.prevMonth = function()
{
//Set the month back by one
this.month = (this.month != 0) ? this.month - 1 : 11;
this.year = (this.month != 11) ? this.year : this.year - 1;
this.drawCalendar();
};
//Sets the calendar to next month
Calendar.prototype.nextMonth = function()
{
//Set the month forward by one
this.month = (this.month != 11) ? this.month + 1 : 0;
this.year = (this.month != 0) ? this.year : this.year + 1;
this.drawCalendar();
};
最佳答案
代码中有3个问题:
a) 您需要“新建”该类:var cal = new Calendar();
b) Calendar 类中的错误:
window.getElementsByClassName("header")[0].innerHTML = monthName + " " + this.year;
应该是
document.getElementsByClassName("header")[0].innerHTML = monthName + " " + this.year;
c) 调用脚本 block 需要位于 html 之后，因为它需要能够引用 DOM(或在 DOM 加载完成时调用)。
...
<button class="calButton" onclick="cal.nextMonth()"><span> Next </span>
</button>
<script type="text/javascript">
var cal = new Calendar();
cal.drawCalendar();
</script>
关于javascript - 为什么这段 html 代码无法识别 javascript 文件中定义的 javascript 函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41049770/