Erreur de commutation de calendrier en JavaScript

Supposons que nous voulions créer des flèches pour permuter le calendrier. Dans ce cas, il est possible de commettre une série d'erreurs caractéristiques. Examinons-les.

Supposons que nous ayons des boutons de commutation et un élément dans lequel, pour simplifier, nous afficherons non pas un calendrier, mais simplement l'année et le nom du mois :

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

Obtenons les références vers nos éléments :

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

Supposons que nous ayons également une fonction qui prend en paramètre le numéro du mois et retourne son nom :

function getMonthName(month) {
	let names = [
		'janv', 'févr', 'mars', 'avr', 'mai', 'juin',
		'juil', 'août', 'sept', 'oct', 'nov', 'déc'
	];
	
	return names[month];
}

Lors du chargement de la page, récupérons l'année et le mois actuels :

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

Affichons dans notre élément l'année et le nom du mois (imitation d'un calendrier) :

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

Attachons maintenant aux commutateurs des gestionnaires de clics :

prev.addEventListener('click', function() {
	// afficher le mois précédent
});

next.addEventListener('click', function() {
	// afficher le mois suivant
});

Examinons maintenant quelles erreurs on peut commettre lors de l'implémentation des commutateurs.

Première erreur

Supposons qu'un certain programmeur ait implémenté les boutons de commutation des mois :

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

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

Ce programmeur, cependant, a commis une erreur, à cause de laquelle le mois ne commute qu'au premier clic, mais pas aux clics suivants.

Le fait est que la variable month ne change pas à l'intérieur des fonctions - on ajoute simplement un à son contenu et on envoie le résultat dans la fonction getMonthName.

Puisque notre variable n'a pas changé, lors du clic suivant, elle contiendra toujours le mois actuel - et rien ne changera.

Corrigeons le problème :

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

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

On peut simplifier :

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

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

Deuxième erreur

On oublie souvent que le mois doit changer dans une certaine plage - de 0 à 11. Lorsqu'on atteint la limite de la plage, nous devons changer l'année (en avant ou en arrière), et remettre le mois à sa valeur initiale.

Faisons cela :

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