0

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.

user10605996
  • 37
  • 1
  • 7
  • 1
    Best to [avoid inline handlers](https://stackoverflow.com/a/59539045), they have way too many problems to be worth using nowadays, such as a demented scope chain and quote escaping issues. Attach event listeners properly using Javascript with `addEventListener` instead. – CertainPerformance Oct 24 '20 at 04:15

1 Answers1

0

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>
luek baja
  • 1,475
  • 8
  • 20