外部 JavaScript 文件中的 Function 将无法运行 OnClick

Question

I created a month calendar using an HTML table element. The table head, from left to right, contains a left caret, the month and year, and a right caret. I'm trying to call a JS function that changes the value of the month and year to the next month when the right caret is clicked. I've tried everything I've found online, but the function will not run.

Here is the HTML code portion where I call the function displayNextMonth(). I put the script before the ending body tag.

<table class="table">
          <thead>
            <tr>
              <th><i class="fa fa-caret-left month-caret"></i></th>
              <th id="month-header" colspan="5"></th>
              <th id="next-month-caret" onclick="displayNextMonth()"><i class="fa fa-caret-right month-caret"></i></th>
            </tr>
            <tr>
              <th>Sun</th>
              <th>Mon</th>
              <th>Tue</th>
              <th>Wed</th>
              <th>Thu</th>
              <th>Fri</th>
              <th>Sat</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="calendar-day" id="sun-w1"></td>
              <td class="calendar-day" id="mon-w1"></td>
              <td class="calendar-day" id="tue-w1"></td>
              <td class="calendar-day" id="wed-w1"></td>
              <td class="calendar-day" id="thu-w1"></td>
              <td class="calendar-day" id="fri-w1"></td>
              <td class="calendar-day" id="sat-w1"></td>
            </tr>
            <tr>
              <td class="calendar-day" id="sun-w2"></td>
              <td class="calendar-day" id="mon-w2"></td>
              <td class="calendar-day" id="tue-w2"></td>
              <td class="calendar-day" id="wed-w2"></td>
              <td class="calendar-day" id="thu-w2"></td>
              <td class="calendar-day" id="fri-w2"></td>
              <td class="calendar-day" id="sat-w2"></td>
            </tr>
            <tr>
              <td class="calendar-day" id="sun-w3"></td>
              <td class="calendar-day" id="mon-w3"></td>
              <td class="calendar-day" id="tue-w3"></td>
              <td class="calendar-day" id="wed-w3"></td>
              <td class="calendar-day" id="thu-w3"></td>
              <td class="calendar-day" id="fri-w3"></td>
              <td class="calendar-day" id="sat-w3"></td>
            </tr>
            <tr>
              <td class="calendar-day" id="sun-w4"></td>
              <td class="calendar-day" id="mon-w4"></td>
              <td class="calendar-day" id="tue-w4"></td>
              <td class="calendar-day" id="wed-w4"></td>
              <td class="calendar-day" id="thu-w4"></td>
              <td class="calendar-day" id="fri-w4"></td>
              <td class="calendar-day" id="sat-w4"></td>
            </tr>
            <tr>
              <td class="calendar-day" id="sun-w5"></td>
              <td class="calendar-day" id="mon-w5"></td>
              <td class="calendar-day" id="tue-w5"></td>
              <td class="calendar-day" id="wed-w5"></td>
              <td class="calendar-day" id="thu-w5"></td>
              <td class="calendar-day" id="fri-w5"></td>
              <td class="calendar-day" id="sat-w5"></td>
            </tr>
          </tbody>
        </table>
<script type="text/javascript" src="js/calendar.js"></script>

Here is my JavaScript code.

function displayNextMonth()
{
    let header = document.getElementById("month-header").innerHTML;
    let split = header.split(" ");
    let viewYear = ParseInt(split[1]);
    let viewMonth = getMonthNum(split[0]);

    if(viewMonth === 11)
    {
        viewYear++;
        viewMonth = 0;
    }
    else
    {
        viewMonth++;
    }

    setCalendarMonth(viewYear, viewMonth);
}
function setCalendarMonth(year, month)
{
    document.getElementById("month-header").innerHTML = getMonthName(month) + " " + year.toString();
}

I know the function getMonthNum, which is called in DisplayNextMonth(), works, so that's not the problem.

Answer 1

The reason the function isn't running is because there is nothing to click on. In this example I have added some random letters inside the element with the onclick handler, and when clicking it you can see that the function runs:

 function displayNextMonth() { let header = document.getElementById("month-header").innerHTML; let split = header.split(" "); let viewYear = ParseInt(split[1]); let viewMonth = getMonthNum(split[0]); if(viewMonth === 11) { viewYear++; viewMonth = 0; } else { viewMonth++; } setCalendarMonth(viewYear, viewMonth); } function setCalendarMonth(year, month) { document.getElementById("month-header").innerHTML = getMonthName(month) + " " + year.toString(); }

 <table class="table"> <thead> <tr> <th><i class="fa fa-caret-left month-caret"></i></th> <th id="month-header" colspan="5"></th> <th id="next-month-caret" onclick="displayNextMonth()">jhgjyguyjg<i class="fa fa-caret-right month-caret"></i></th> </tr> <tr> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </tr> </thead> <tbody> <tr> <td class="calendar-day" id="sun-w1"></td> <td class="calendar-day" id="mon-w1"></td> <td class="calendar-day" id="tue-w1"></td> <td class="calendar-day" id="wed-w1"></td> <td class="calendar-day" id="thu-w1"></td> <td class="calendar-day" id="fri-w1"></td> <td class="calendar-day" id="sat-w1"></td> </tr> <tr> <td class="calendar-day" id="sun-w2"></td> <td class="calendar-day" id="mon-w2"></td> <td class="calendar-day" id="tue-w2"></td> <td class="calendar-day" id="wed-w2"></td> <td class="calendar-day" id="thu-w2"></td> <td class="calendar-day" id="fri-w2"></td> <td class="calendar-day" id="sat-w2"></td> </tr> <tr> <td class="calendar-day" id="sun-w3"></td> <td class="calendar-day" id="mon-w3"></td> <td class="calendar-day" id="tue-w3"></td> <td class="calendar-day" id="wed-w3"></td> <td class="calendar-day" id="thu-w3"></td> <td class="calendar-day" id="fri-w3"></td> <td class="calendar-day" id="sat-w3"></td> </tr> <tr> <td class="calendar-day" id="sun-w4"></td> <td class="calendar-day" id="mon-w4"></td> <td class="calendar-day" id="tue-w4"></td> <td class="calendar-day" id="wed-w4"></td> <td class="calendar-day" id="thu-w4"></td> <td class="calendar-day" id="fri-w4"></td> <td class="calendar-day" id="sat-w4"></td> </tr> <tr> <td class="calendar-day" id="sun-w5"></td> <td class="calendar-day" id="mon-w5"></td> <td class="calendar-day" id="tue-w5"></td> <td class="calendar-day" id="wed-w5"></td> <td class="calendar-day" id="thu-w5"></td> <td class="calendar-day" id="fri-w5"></td> <td class="calendar-day" id="sat-w5"></td> </tr> </tbody> </table> <script type="text/javascript" src="js/calendar.js"></script>