Question

我是JavaScript新手，对于一个类项目，我们需要制作2017年的日历。由于我们只关心2017年所有值都是永久设置的。这是我到目前为止以及当我尝试运行时这一点，我所能看到的只是页脚。为什么我的桌子出现了？

HTML-

<html>
    <head>
        <meta charset="utf-8" name="viewport" content="width=device-width,    initial-scale=1.0">
        <title>2017 Calendar</title>
        <link href="../css/sites.css" rel="stylesheet">
        <script src="../js/calendar.js"></script>
    </head>

    <body id="index-body">
        <header>
            <div></div>
            <nav></nav>
        </header>

        <main id="index-main">
            <div id = "calendar">
            </div>
        </main>

        <footer>Copyright &copy;  2017  CS-234 </footer>

    </body>
</html>

JS -

// sets up the days of the week in an array
 var daysOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",      "Friday", "Saturday"];

// sets up the calendar array with all 12 months
var calendarJSON =
    '{' +
    '"calendar:": [' +
    '{"month": "January", "days": 31, "start": "Sunday", "specials": ""},' +
    '{"month": "February", "days": 28, "start": "Wednesday", "specials": ""},' +
    '{"month": "March", "days": 31, "start": "Wednesday", "specials": ""},' +
    '{"month": "April", "days": 30, "start": "Saturday", "specials": ""},' +
    '{"month": "May", "days": 31, "start": "Monday", "specials": ""},' +
    '{"month": "June", "days": 30, "start": "Thursday", "specials": ""},' +
    '{"month": "July", "days": 31, "start": "Saturday", "specials": ""},' +
    '{"month": "August", "days": 31, "start": "Tuesday", "specials": ""},' +
    '{"month": "September", "days": 30, "start": "Friday", "specials": ""},' +
    '{"month": "October", "days": 31, "start": "Sunday", "specials": ""},' +
    '{"month": "November", "days": 30, "start": "Wednesday", "specials": ""},' +
    '{"month": "December", "days": 31, "start": "Friday", "specials": ""}' +
    ']' +
    '}';


var calendarJS = JSON.parse(calendarJSON);

var current = new Date();
var currentMonth = current.getMonth();
var currentDay = current.getDate();

window.onload = function () {
    for (var i = 0; i < 12; i++) {
        var newCalendar = create_calendar();
        document.getElementById("calendar").appendChild(newCalendar);
    }
}

function create_calendar() {
    //getting the starting day of the week and the amount of days in the month
    var startDay = daysOfTheWeek.indexOf(calendarJS.calendar[i].start);
    var ThisMonthDays = calendarJS.calendar[i].days;

    //creating the table
    var table = document.createElement('table');
    var th = document.createElement('th');
    th.innerHTML = calendarJS.calendar[i].month;

    //Row for days
    var tr = document.createElement('tr');
    for (var a = 0; a < 7; a++) {
        var td = document.createElement('td');
        td.innerHTML = "SMTWTFS"[a];
        tr.appendChild(td);
    }
    table.appendChild(tr);

    //loops for the first row of the month
    var tr = document.createElement('tr');
    var x;
    var spaces = 0;
    for (x = 0; x < 7; x++) {
        if (x == startDay) {
            break;
        }
        var td = document.createElement('td');
        td.innerHTML = "";
        tr.appendChild('td');
        spaces++;
    }
    var dayNumber = 1;
    for (; x < 7; x++) {
        var td = document.createElement('td');
        td.innerHTML = dayNumber;
        dayNumber++;
        tr.appendChild(td);
    }
    table.appendChild(tr);

    var daysLeft = ThisMonthDays - spaces;
    var weeksLeft = math.ceil(daysLeft / 7);

    //for loop for the rest of the days
    for (var w = 0; w < weeksLeft; w++) {
        var tr = document.createElement('tr');
        for (var h = 0; h < 7; h++) {
            if (dayNumber > ThisMonthDays) {
                table.appendChild(tr);
                return table;
            }
            var td = document.createElement('td');
            td.innerHTML = dayNumber;
            dayNumber++;
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
}

Answer 1

你遇到了很多问题 - 我修复了其中的四个并开始在屏幕上加载内容。我在每个附近都添加了评论，并会提供一些解释。过去，您必须为自己做一些故障排除：）

您试图利用i内onload内定义的create_calendar，但这是一个完全不同的功能范围，无法访问i。所以我把它当成了一个论点。
您已将calendarJSON中的媒体资源定义为calendar:而不是calendar
您尝试将Math对象引用为math
当你打算传递一个名为'td'的变量时，你曾经传过字符串td。

建议点 - 在控制台中查找错误并学习跟踪它们。此外，在Chrome开发工具＆＃39; ＆＃34;来源＆＃34;在面板中，您可以单击octogon中的暂停按钮，使代码在错误即将发生之前暂停，并尝试找出问题所在。

＆＃13;

// sets up the days of the week in an array
 var daysOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",      "Friday", "Saturday"];

// sets up the calendar array with all 12 months
var calendarJSON =
    '{' +
    '"calendar": [' + // you had this as 'calendar:'
    '{"month": "January", "days": 31, "start": "Sunday", "specials": ""},' +
    '{"month": "February", "days": 28, "start": "Wednesday", "specials": ""},' +
    '{"month": "March", "days": 31, "start": "Wednesday", "specials": ""},' +
    '{"month": "April", "days": 30, "start": "Saturday", "specials": ""},' +
    '{"month": "May", "days": 31, "start": "Monday", "specials": ""},' +
    '{"month": "June", "days": 30, "start": "Thursday", "specials": ""},' +
    '{"month": "July", "days": 31, "start": "Saturday", "specials": ""},' +
    '{"month": "August", "days": 31, "start": "Tuesday", "specials": ""},' +
    '{"month": "September", "days": 30, "start": "Friday", "specials": ""},' +
    '{"month": "October", "days": 31, "start": "Sunday", "specials": ""},' +
    '{"month": "November", "days": 30, "start": "Wednesday", "specials": ""},' +
    '{"month": "December", "days": 31, "start": "Friday", "specials": ""}' +
    ']' +
    '}';


var calendarJS = JSON.parse(calendarJSON);

var current = new Date();
var currentMonth = current.getMonth();
var currentDay = current.getDate();

window.onload = function () {
    for (var i = 0; i < 12; i++) {
        var newCalendar = create_calendar(i);
        document.getElementById("calendar").appendChild(newCalendar);
    }
}

function create_calendar(i) { // is is not available here unless you pass it in
    //getting the starting day of the week and the amount of days in the month
    var startDay = daysOfTheWeek.indexOf(calendarJS.calendar[i].start);
    var ThisMonthDays = calendarJS.calendar[i].days;

    //creating the table
    var table = document.createElement('table');
    var th = document.createElement('th');
    th.innerHTML = calendarJS.calendar[i].month;

    //Row for days
    var tr = document.createElement('tr');
    for (var a = 0; a < 7; a++) {
        var td = document.createElement('td');
        td.innerHTML = "SMTWTFS"[a];
        tr.appendChild(td);
    }
    table.appendChild(tr);

    //loops for the first row of the month
    var tr = document.createElement('tr');
    var x;
    var spaces = 0;
    for (x = 0; x < 7; x++) {
        if (x == startDay) {
            break;
        }
        var td = document.createElement('td');
        td.innerHTML = "";
        tr.appendChild(td); // shouldn't have been wrapped in quotes
        spaces++;
    }
    var dayNumber = 1;
    for (; x < 7; x++) {
        var td = document.createElement('td');
        td.innerHTML = dayNumber;
        dayNumber++;
        tr.appendChild(td);
    }
    table.appendChild(tr);

    var daysLeft = ThisMonthDays - spaces;
    var weeksLeft = Math.ceil(daysLeft / 7); // should be Math, not math

    //for loop for the rest of the days
    for (var w = 0; w < weeksLeft; w++) {
        var tr = document.createElement('tr');
        for (var h = 0; h < 7; h++) {
            if (dayNumber > ThisMonthDays) {
                table.appendChild(tr);
                return table;
            }
            var td = document.createElement('td');
            td.innerHTML = dayNumber;
            dayNumber++;
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
}

＆＃13;

<html>
    <head>
        <meta charset="utf-8" name="viewport" content="width=device-width,    initial-scale=1.0">
        <title>2017 Calendar</title>
        <link href="../css/sites.css" rel="stylesheet">
    </head>

    <body id="index-body">
        <header>
            <div></div>
            <nav></nav>
        </header>

        <main id="index-main">
            <div id = "calendar">
            </div>
        </main>

        <footer>Copyright &copy;  2017  CS-234 </footer>

    </body>
</html>

＆＃13;

在日历中显示表格

1 个答案: