Chyba pri prepínaní kalendára v JavaScripte

Povedzme, že chceme vytvoriť šípky na prepínanie kalendára. V takom prípade môžeme urobiť rad charakteristických chýb. Poďme si ich prejsť.

Povedzme, že máme tlačidlá na prepínanie a element, do ktorého pre jednoduchosť nebudeme vypisovať kalendár, ale len rok a názov mesiaca:

<button id="prev">predchádzajúci</button>
<div id="elem"></div>
<button id="next">ďalší</button>

Získame odkazy na naše elementy:

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

Povedzme, že máme tiež funkciu, ktorá ako parameter prijíma číslo mesiaca a vráti jeho názov:

function getMonthName(month) {
	let names = [
		'jan', 'feb', 'mar', 'apr', 'máj', 'jún',
		'júl', 'aug', 'sep', 'okt', 'nov', 'dec'
	];
	
	return names[month];
}

Po načítaní stránky získame aktuálny rok a mesiac:

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

Vypíšeme do nášho elementu rok a názov mesiaca (imitatívny kalendár):

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

Teraz na prepínače pridáme obsluhu kliknutí:

prev.addEventListener('click', function() {
	// zobrazíme predchádzajúci mesiac
});

next.addEventListener('click', function() {
	// zobrazíme nasledujúci mesiac
});

Pozrime sa teraz na chyby, ktoré môžeme urobiť pri implementácii prepínačov.

Prvá chyba

Povedzme, že nejaký programátor implementoval tlačidlá na prepínanie mesiacov:

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

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

Tento programátor však urobil chybu, kvôli ktorej sa mesiac prepne len pri prvom kliku, ale nie pri ďalších.

Problém je v tom, že premenná month sa nemení vo vnútri funkcií - k jej obsahu sa jednoducho pripočíta jedna a výsledok sa odošle do funkcie getMonthName.

Keďže sa naša premenná nezmenila, tak pri ďalšom kliknutí v nej naďalej bude aktuálny mesiac - a nič sa nezmení.

Opravme problém:

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

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

Môžeme to zjednodušiť:

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

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

Druhá chyba

Často sa zabúda na to, že mesiac by sa mal meniť v určitom rozsahu - od 0 do 11. Pri dosiahnutí hranice rozsahu by sme mali zmeniť rok (dopredu alebo dozadu) a mesiac resetovať na počiatočnú hodnotu.

Urobme to:

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