Function in External JavaScript file will not run OnClick

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.