Kalender omschakelfout in JavaScript

Stel we willen pijlen maken om de kalender te wisselen. In dit geval kan men een aantal karakteristieke fouten maken. Laten we ze bekijken.

Stel we hebben knoppen om te wisselen en een element waarin we voor de eenvoud geen kalender zullen tonen, maar simpelweg het jaar en de naam van de maand:

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

We halen referenties naar onze elementen:

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

Stel we hebben ook een functie, die als parameter een maandnummer accepteert en zijn naam teruggeeft:

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

Laten we bij het laden van de pagina het huidige jaar en de huidige maand verkrijgen:

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

We tonen in ons element het jaar en de naam van de maand (imitatie van een kalender):

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

Laten we nu op de wisselknoppen click event listeners plaatsen:

prev.addEventListener('click', function() {
	// toon de vorige maand
});

next.addEventListener('click', function() {
	// toon de volgende maand
});

Laten we nu bekijken welke fouten men kan maken bij de implementatie van de wisselknoppen.

Eerste fout

Stel een programmeur heeft de maandwisselknoppen geïmplementeerd:

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

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

Deze programmeur heeft echter een fout gemaakt, waardoor de maand alleen bij de eerste click wisselt, maar niet bij de volgende.

Het probleem is dat de variabele month niet verandert in de functies - er wordt simpelweg een één bij opgeteld en het resultaat naar de functie getMonthName gestuurd.

Aangezien onze variabele niet is veranderd, zal bij de volgende click er nog steeds de huidige maand in zitten - en zal er niets veranderen.

Laten we het probleem oplossen:

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

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

We kunnen het vereenvoudigen:

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

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

Tweede fout

Men vergeet vaak dat de maand in een bepaald bereik moet veranderen - van 0 tot 11. Bij het bereiken van de grenzen van het bereik moeten we het jaar wijzigen (vooruit of achteruit), en de maand resetten naar de beginwaarde.

Laten we dit doen:

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