A naptárváltás hibája JavaScriptben

Tegyük fel, hogy nyilakat szeretnénk készíteni a naptár váltásához. Ebben az esetben számos jellemző hibát el lehet követni. Nézzük meg ezeket.

Tegyük fel, hogy vannak váltógombjaink és egy elem, amelybe az egyszerűség kedvéért nem egy naptárt fogunk megjeleníteni, hanem csak az évet és a hónap nevét:

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

Szerezzük meg az elemeinkre mutató hivatkozásokat:

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

Tegyük fel, hogy van egy függvényünk is, amely paraméterként fogadja a hónap sorszámát és visszaadja a nevét:

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

Az oldal betöltésekor kapjuk meg az aktuális évet és hónapot:

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

Jelenítsük meg az elemben az évet és a hónap nevét (a naptár szimulálása):

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

Most tegyük a váltókra a kattintáskezelőket:

prev.addEventListener('click', function() {
	// az előző hónap megjelenítése
});

next.addEventListener('click', function() {
	// a következő hónap megjelenítése
});

Nézzük most meg, milyen hibákat lehet elkövetni a váltók megvalósításakor.

Első hiba

Tegyük fel, hogy egy programozó a következőképpen valósította meg a hónapok váltógombjait:

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

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

Ez a programozó azonban hibát követett el, ami miatt a hónap csak az első kattintásra változik, de a továbbiakra már nem.

Az a helyzet, hogy a month változó nem változik a függvényekben - csak hozzáadunk egyet és az eredményt átadjuk a getMonthName függvénynek.

Mivel a változónk nem változott, a következő kattintáskor továbbra is az aktuális hónap lesz benne - és semmi nem fog változni.

Javítsuk a problémát:

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

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

Le lehet egyszerűsíteni:

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

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

Második hiba

Gyakran elfelejtik, hogy a hónapnak egy meghatározott tartományban kell változnia - 0 és 11 között. A tartomány határának elérésekor változtatnunk kell az évet (előre vagy hátra), és a hónapot visszaállítani a kezdeti értékre.

Valósítsuk ezt meg:

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