Errore di commutazione del calendario in JavaScript

Supponiamo di voler creare delle frecce per commutare il calendario. In questo caso è possibile commettere una serie di errori caratteristici. Analizziamoli.

Supponiamo di avere dei pulsanti di commutazione e un elemento in cui, per semplicità, visualizzeremo non il calendario, ma solo l'anno e il nome del mese:

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

Otteniamo i riferimenti ai nostri elementi:

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

Supponiamo inoltre di avere una funzione che accetta come parametro il numero del mese e restituisce il suo nome:

function getMonthName(month) {
	let names = [
		'gen', 'feb', 'mar', 'apr', 'mag', 'giu',
		'lug', 'ago', 'set', 'ott', 'nov', 'dic'
	];
	
	return names[month];
}

Al caricamento della pagina otteniamo l'anno e il mese corrente:

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

Visualizziamo nel nostro elemento l'anno e il nome del mese (simulazione del calendario):

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

Aggiungiamo ora ai commutatori degli handler per i click:

prev.addEventListener('click', function() {
	// mostra il mese precedente
});

next.addEventListener('click', function() {
	// mostra il mese successivo
});

Consideriamo ora quali errori si possono commettere durante l'implementazione dei commutatori.

Primo errore

Supponiamo che un programmatore abbia implementato i pulsanti di commutazione dei mesi così:

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

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

Questo programmatore, tuttavia, ha commesso un errore, a causa del quale il mese viene commutato solo al primo click, ma non a quelli successivi.

Il fatto è che la variabile month non cambia all'interno delle funzioni - al suo contenuto viene semplicemente aggiunto o sottratto uno e il risultato viene passato alla funzione getMonthName.

Poiché la nostra variabile non è cambiata, al click successivo conterrà comunque il mese corrente - e nulla cambierà.

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

Possiamo semplificare:

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

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

Secondo errore

Spesso ci si dimentica che il mese deve cambiare in un determinato intervallo - da 0 a 11. Al raggiungimento del limite dell'intervallo dobbiamo cambiare l'anno (avanti o indietro), e reimpostare il mese sul valore iniziale.

Facciamolo:

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