Napaka pri preklapljanju koledarja v JavaScript

Recimo, da želimo narediti puščice za preklapljanje koledarja. V tem primeru lahko naredimo vrsto značilnih napak. Oglejmo si jih.

Recimo, da imamo gumbe za preklapljanje in element, v katerega bomo zaradi enostavnosti izpisovali ne koledar, ampak preprosto leto in ime meseca:

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

Pridobimo reference na naše elemente:

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

Recimo, da imamo tudi funkcijo, ki kot parameter sprejme številko meseca in vrne njegovo ime:

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

Ob nalaganju strani pridobimo trenutno leto in mesec:

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

Izpišimo v naš element leto in ime meseca (immitacija koledarja):

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

Sedaj na preklopne gumbe dodajmo poslušalce klikov:

prev.addEventListener('click', function() {
	// prikažemo prejšnji mesec
});

next.addEventListener('click', function() {
	// prikažemo naslednji mesec
});

Oglejmo si sedaj, katere napake lahko naredimo pri implementaciji preklopnikov.

Prva napaka

Recimo, da je neki programer implementiral gumbe za preklapljanje mesecev:

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

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

Vendar je ta programer naredil napako, zaradi katere se mesec preklapla le ob prvem kliku, ne pa tudi ob naslednjih.

Bistvo je v tem, da se spremenljivka month ne spreminja znotraj funkcij - k njeni vsebini se preprosto doda ena in rezultat pošlje v funkcijo getMonthName.

Ker se naša spremenljivka ni spremenila, bo ob naslednjem kliku v njej še vedno bil trenutni mesec - in nič se ne bo spremenilo.

Popravimo težavo:

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

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

Lahko poenostavimo:

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

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

Druga napaka

Pogosto pozabimo, da se mora mesec spreminjati v določenem območju - od 0 do 11. Ob dosegu meje območja moramo spremeniti leto (naprej ali nazaj), mesec pa ponastaviti na začetno vrednost.

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