Error de cambio de calendario en JavaScript

Supongamos que queremos hacer flechas para cambiar el calendario. En este caso, es posible cometer una serie de errores característicos. Vamos a analizarlos.

Supongamos que tenemos botones de cambio y un elemento en el que, por simplicidad, mostraremos no el calendario, sino simplemente el año y el nombre del mes:

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

Obtengamos referencias a nuestros elementos:

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

Supongamos que también tenemos una función que toma como parámetro el número del mes y devuelve su nombre:

function getMonthName(month) {
	let names = [
		'ene', 'feb', 'mar', 'abr', 'may', 'jun',
		'jul', 'ago', 'sep', 'oct', 'nov', 'dic'
	];
	
	return names[month];
}

Al cargar la página, obtengamos el año y mes actuales:

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

Mostremos en nuestro elemento el año y el nombre del mes (simulando un calendario):

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

Ahora asignemos manejadores de clics a los botones de cambio:

prev.addEventListener('click', function() {
	// mostrar el mes anterior
});

next.addEventListener('click', function() {
	// mostrar el mes siguiente
});

Consideremos ahora qué errores se pueden cometer al implementar los botones de cambio.

Primer error

Supongamos que un programador implementó los botones de cambio de mes de la siguiente manera:

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

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

Sin embargo, este programador cometió un error, debido al cual el mes cambia solo en el primer clic, pero no en los siguientes.

El problema es que la variable month no cambia dentro de las funciones - simplemente se le suma o resta uno y el resultado se envía a la función getMonthName.

Como nuestra variable no ha cambiado, en el siguiente clic seguirá conteniendo el mes actual - y nada cambiará.

Arreglemos el problema:

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

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

Se puede simplificar:

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

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

Segundo error

A menudo se olvida que el mes debe cambiar dentro de un rango específico - de 0 a 11. Al alcanzar el límite del rango deberíamos cambiar el año (hacia adelante o hacia atrás), y restablecer el mes a su valor inicial.

Hagamos esto:

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);
});