The Calendar Switching Error in JavaScript

Suppose we want to create arrows for switching the calendar. In this case, one can make a number of typical errors. Let's examine them.

Suppose we have switching buttons and an element, into which for simplicity we will output not the calendar, but just the year and the month name:

<button id="prev">prev</button>
<div id="elem"></div>
<button id="next">next</button>

Let's get references to our elements:

let elem = document.querySelector('#elem');
let prev = document.querySelector('#prev');
let next = document.querySelector('#next');

Suppose we also have a function that takes a month number as a parameter and returns its name:

function getMonthName(month) {
	let names = [
		'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
		'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
	];
	
	return names[month];
}

Let's get the current year and month upon page load:

let date  = new Date;
let year  = date.getFullYear();
let month = date.getMonth();

Let's output the year and the month name into our element (calendar simulation):

elem.textContent = year + ' ' + getMonthName(month);

Now let's attach click handlers to the switches:

prev.addEventListener('click', function() {
	// show the previous month
});

next.addEventListener('click', function() {
	// show the next month
});

Let's now consider what errors can be made when implementing the switches.

First Error

Suppose a programmer implemented the month switching buttons as follows:

next.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(month + 1);
});

prev.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(month - 1);
});

This programmer, however, made a mistake, due to which the month switches only on the first click, but not on subsequent ones.

The point is that the variable month is not modified inside the functions - they simply add one to its content and send the result to the getMonthName function.

Since our variable hasn't changed, on the next click it will still contain the current month - and nothing will change.

Let's fix the problem:

next.addEventListener('click', function() {
	month = month + 1;
	elem.textContent = year + ' ' + getMonthName(month);
});

prev.addEventListener('click', function() {
	month = month - 1;
	elem.textContent = year + ' ' + getMonthName(month);
});

It can be simplified:

next.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(++month);
});

prev.addEventListener('click', function() {
	elem.textContent = year + ' ' + getMonthName(--month);
});

Second Error

It is often forgotten that the month must change within a certain range - from 0 to 11. When reaching the range boundary, we must change the year (forward or backward), and reset the month to the initial value.

Let's do this:

next.addEventListener('click', function() {
	if (month === 11) {
		month = 0;
		year++;
	} else {
		month++;
	}
	
	elem.textContent = year + ' ' + getMonthName(month);
});

prev.addEventListener('click', function() {
	if (month === 0) {
		month = 11;
		year--;
	} else {
		month--;
	}
	
	elem.textContent = year + ' ' + getMonthName(month);
});