How to add an event listener, remove it, and add it again?

Question

I have a Chrome calendar app that displays the current month. I also have next Month and Previous month buttons that go the the next and previous month depending on what month is being displayed. However, I would only like the calendar to go as far as December of the current year and January of the current year, so after the user hits December/January, I remove the event handler. But, I need to add the event handler again when it is not December or January. How should I do this?

var count = 0;


var updated = setInterval(function() {

 var v = document.getElementById("CalendarMonth").innerHTML;
  
 updatedMonth = months.indexOf(v);
 
}, 1000);




document.getElementById("nextMonth").addEventListener("click", nxtMonth);

function nxtMonth()
{
  count = count +1;
  

     if(nextMonth == 11)
   {
      console.log("the year has ended!");
      document.getElementById("nextMonth").removeEventListener("click", nxtMonth);
    }

 else
 {
   nextMonth = updated + count;
//ideally, this would work. But for some reason it does not
   document.getElementById("nextMonth").addEventListener("click", nxtMonth); 
  
 } 

document.getElementById("previousMonth").addEventListener("click",    prevMonth);

function prevMonth()
{
  count = count -1;


 if(previousMonth == -1)
      {
        console.log("the year has just started!");

                  document.getElementById("previousMonth").removeEventListener("click", prevMonth);
      }
      else if(count==-1)
      {
        previousMonth =1;
      }
      
      else
      {
          previousMonth = updated + count;
           document.getElementById("previousMonth").addEventListener("click", prevMonth);
        
      }

Answer 1

Well I think a simpler approach would be to just not remove the click listener and instead just return immediately before incrementing/decrementing the current month.

So for instance the next month handler would be:

if (nextMonth == 11) {
    return;
}
count++;

Answer 2

A simple and more elegant solution from the usability point of view would be to just add another event handler, one for each of the "next month" and "previous months" buttons to deactivate them when one of the limits are reached. This way, the browser will do the work for you (it won't allow the user to click them) and the user will also get the visual feedback that they have reached the limit.

function checkMonth(currentMonth)
{
    if(currentMonth == 12){
        document.getElementById("nextMonth").disabled = true;
    } else {
        document.getElementById("nextMonth").disabled = false;
    }

    if(currentMonth == 1){
        document.getElementById("previousMonth").disabled = true;
    } else {
        document.getElementById("previousMonth").disabled = false;
    }
}

Just call this function in your already existing event handlers for the two buttons.

I have not checked this function and maybe you can even optimise it a little bit, but this is the approach I would have.