Question

我对javascript和html很陌生，而且我在构建日历时遇到了麻烦。我已经在javascript中创建了应该创建日历的函数，但由于某种原因，当我尝试在HTML中使用它时，我在javascript文件中定义的javascript函数无法被识别。

我一直收到错误＆＃39;日历（）＆＃39;在HTML代码中未定义。

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 + "&nbsp;" + 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();
};

Answer 1

代码中有3个问题：

a）你需要在课堂上“新”：var cal = new Calendar();

b）Calendar类中的错误：

window.getElementsByClassName("header")[0].innerHTML =  monthName + "&nbsp;" + this.year;

应该是

document.getElementsByClassName("header")[0].innerHTML =  monthName + "&nbsp;" + this.year;

c）调用脚本块需要在html之后，因为它需要能够引用DOM（或在DOM加载完成时调用）。

...
<button class="calButton" onclick="cal.nextMonth()"><span> Next </span>
</button>

<script type="text/javascript">
  var cal = new Calendar();
  cal.drawCalendar();
</script>

更正了演示 - http://plnkr.co/edit/Xnn9ZwM0wA7pWVQelPEf?p=preview

Answer 2

您的问题似乎是这行代码：

struct

应该是：

window.getElementsByClassName(...)

您还需要更改此内容：

document.getElementsByTagName(...)

到此：

var cal = Calendar();

看看这是否解决了这个问题。

为什么这个HTML代码不能识别javascript文件中定义的javascript函数？

2 个答案: