Chyba přepínání kalendáře v JavaScriptu

Předpokládejme, že chceme vytvořit šipky pro přepínání kalendáře. V tomto případě lze udělat řadu charakteristických chyb. Pojďme je prozkoumat.

Předpokládejme, že máme tlačítka pro přepínání a prvek, do kterého pro jednoduchost nebudeme vypisovat kalendář, ale pouze rok a název měsíce:

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

Získáme odkazy na naše prvky:

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

Předpokládejme, že máme také funkci, která parametrem přijímá číslo měsíce a vrací jeho název:

function getMonthName(month) {
	let names = [
		'led', 'úno', 'bře', 'dub', 'kvě', 'čvn',
		'čvc', 'srp', 'zář', 'říj', 'lis', 'pro'
	];
	
	return names[month];
}

Při načtení stránky získáme aktuální rok a měsíc:

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

Vypišme do našeho prvku rok a název měsíce (imitace kalendáře):

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

Nyní na přepínače připojme obslužné rutiny kliknutí:

prev.addEventListener('click', function() {
	// zobrazíme předchozí měsíc
});

next.addEventListener('click', function() {
	// zobrazíme následující měsíc
});

Podívejme se nyní na chyby, které lze udělat při implementaci přepínačů.

První chyba

Předpokládejme, že nějaký programátor implementoval tlačítka pro přepínání měsíců:

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 udělal chybu, kvůli které se měsíc přepíná pouze po prvním kliku, ale ne po následujících.

Jde o to, že proměnná month se nemění uvnitř funkcí - k jejímu obsahu se jednoduše přičte jedna a výsledek se pošle do funkce getMonthName.

Jelikož se naše proměnná nezměnila, bude při příštím kliknutí stále obsahovat aktuální měsíc - a nic se nezmění.

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

Lze zjednodušit:

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

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

Druhá chyba

Často se zapomíná na to, že měsíc by se měl měnit v určitém rozsahu - od 0 do 11. Při dosažení hranice rozsahu bychom měli změnit rok (dopředu nebo dozadu) a měsíc resetovat na počáteční hodnotu.

Udělejme 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);
});