Fejl ved skift af kalender i JavaScript

Lad os sige, at vi vil lave pile til at skifte kalender. I dette tilfælde kan man begå en række karakteristiske fejl. Lad os se på dem.

Lad os sige, at vi har knapper til at skifte og et element, hvor vi for enkelheds skyld vil vise ikke en kalender, men blot et år og månedens navn:

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

Lad os hente referencer til vores elementer:

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

Lad os også sige, at vi har en funktion, som tager månedens nummer som parameter og returnerer dets navn:

function getMonthName(month) {
	let names = [
		'jan', 'feb', 'mar', 'apr', 'maj', 'jun',
		'jul', 'aug', 'sep', 'okt', 'nov', 'dec'
	];
	
	return names[month];
}

Lad os ved sidelæsning hente det aktuelle år og måned:

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

Lad os vise året og månedens navn i vores element (efterligning af en kalender):

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

Lad os nu tilføje klik-handlers til skifterne:

prev.addEventListener('click', function() {
	// viser forrige måned
});

next.addEventListener('click', function() {
	// viser næste måned
});

Lad os nu overveje, hvilke fejl man kan lave ved implementering af skifterne.

Første fejl

Lad os sige, at en programmør implementerede knapper til at skifte måneder på denne måde:

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

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

Denne programmør begik dog en fejl, som fører til, at måneden kun skifter ved det første klik, men ikke ved de efterfølgende.

Grunden er, at variablen month ikke ændres inde i funktionerne - der lægges blot en til eller trækkes en fra fra dens indhold og resultatet sendes til funktionen getMonthName.

Da vores variabel ikke er ændret, vil den indeholde den nuværende måned ved næste klik - og intet vil ændre sig.

Lad os rette problemet:

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

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

Det kan forenkles:

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

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

Anden fejl

Man glemmer ofte, at måneden skal ændres inden for et bestemt interval - fra 0 til 11. Ved at nå intervalgrænsen skal vi ændre året (frem eller tilbage), og nulstille måneden til startværdien.

Lad os gøre dette:

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