Greška pri prebacivanju kalendara u JavaScript-u

Pretpostavimo da želimo da napravimo strelice za prebacivanje kalendara. U ovom slučaju može se napraviti niz karakterističnih grešaka. Hajde da ih razmotrimo.

Pretpostavimo da imamo dugmiće za prebacivanje i element, u koji ćemo zbog jednostavnosti ispisivati ne kalendar, već samo godinu i naziv meseca:

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

Pribavićemo reference na naše elemente:

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

Pretpostavimo da takođe imamo funkciju, koja kao parametar prima broj meseca i vraća njegov naziv:

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

Hajde da po učitavanju stranice pribavimo trenutnu godinu i mesec:

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

Ispisaćemo u naš element godinu i naziv meseca (imittacija kalendara):

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

Hajde sada na prekidače da postavimo osluškivače klika:

prev.addEventListener('click', function() {
	// prikazujemo prethodni mesec
});

next.addEventListener('click', function() {
	// prikazujemo sledeći mesec
});

Razmotrimo sada, koje greške se mogu učiniti prilikom realizacije prekidača.

Prva greška

Pretpostavimo da je neki programer realizovao dugmiće za prebacivanje meseci:

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

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

Ovaj programer je, međutim, napravio grešku, zbog koje se mesec prebacuje samo pri prvom kliku, ali ne i pri narednim.

Stvar je u tome što se promenljiva month ne menja unutar funkcija - njenom sadržaju se samo dodaje jedinica i rezultat se šalje u funkciju getMonthName.

Pošto se naša promenljiva nije promenila, pri sledećem kliku u njoj će i dalje biti trenutni mesec - i ništa se neće promeniti.

Ispravimo problem:

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

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

Može se pojednostaviti:

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

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

Druga greška

Često se zaboravlja na to da mesec mora da se menja u određenom opsegu - od 0 do 11. Pri dostizanju granice opsega treba da promenimo godinu (napred ili nazad), a mesec da vratimo na početnu vrednost.

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