爲什麼這個html代碼不能識別JavaScript文件中定義的javascript函數？

我對javascript和html很新，我在構建日曆時遇到了問題。我已經在JavaScript中創建了應該創建日曆的函數，但由於某些原因，當我嘗試在HTML中使用它們時，我在javascript文件中定義的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 + "&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(); 
};

來源

2016-12-08 Joseph Cleary

你檢查錯誤開發者控制檯？ – Pointy

爲什麼第二個腳本標記？你正在重寫'Calendar'，爲什麼你要返回'return cal.drawCalendar（）;'？ – mattias

將您的腳本標記移動到身體的盡頭而不是將它們放在頭上如果您想要在加載時執行代碼 – Yaser

有3個問題中的代碼：

一）您需要「新」了類：var cal = new Calendar();

二）在Calendar類的錯誤：

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

它應該是

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

c）調用腳本塊需要在html之後，因爲它ne編輯可以引用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

來源

2016-12-08 23:29:20

剛剛更新了plunker，因爲有第二次參考'window.getElementsByClassName' –

感謝您的帖子，這解決了這個問題，但我認爲html會顯示爲一個單元格的表格（如實際日曆）。什麼.generateHTML函數應該做什麼？你對錶格沒有形成的原因有什麼建議嗎？ –

是的，可能是因爲您在''內插入（嵌套）'tr's。用命令'document.getElementsByClassName（「days」）[0] .innerHTML = html;'。你想要做的是找到表格並在其中插入行 –

看來，你的問題是與這行代碼：

window.getElementsByClassName(...)

它應該是：

document.getElementsByTagName(...)

你也需要改變這一點：

var cal = Calendar();

這樣：

var cal = new Calendar();

看看是否能解決此問題。

來源

2016-12-08 22:27:21 mangotang

嘿，我真的很感謝答案，但我嘗試了你的建議修改，我仍然有同樣的錯誤。'Calendar（）'仍然不確定是否有其他的建議嗎？ –

我只是改變了，但仍然是相同的錯誤 –

爲什麼這個html代碼不能識別JavaScript文件中定義的javascript函數？

回答

相關問題