Kalendri lülitumisviga JavaScriptis

Oletame, et tahame teha nooli kalendri lülitamiseks. Sellisel juhul võib teha mitmeid iseloomulikke vigu. Vaatame neid lähemalt.

Oletame, et meil on lülitusnupud ja element, kuhu lihtsuse mõttes me ei väljasta kalendrit, vaid lihtsalt aasta ja kuu nime:

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

Hankime viited meie elementidele:

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

Oletame, et meil on ka funktsioon, mis parameetrina võtab kuu numbri ja tagastab selle nime:

function getMonthName(month) {
	let names = [
		'jaan', 'veebr', 'märts', 'apr', 'mai', 'juuni',
		'juuli', 'aug', 'sept', 'okt', 'nov', 'dets'
	];
	
	return names[month];
}

Lehekülje laadimisel hankige praegune aasta ja kuu:

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

Väljastame meie elemendis aasta ja nime kuu (kalendri imitatsioon):

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

Paneme nüüd lülititele klikirakendajad:

prev.addEventListener('click', function() {
	// näitame eelmist kuud
});

next.addEventListener('click', function() {
	// näitame järgmist kuud
});

Vaatame nüüd, milliseid vigu saab teha lülitite rakendamisel.

Esimene viga

Oletame, et mõni programmeerija rakendas kuude lülitusnuppe:

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

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

See programmeerija tegi siiski vea, mille tõttu kuu lülitub ainult esimesel klikil, kuid mitte järgnevatel.

Asi on selles, et muutuja month ei muutu funktsioonide sees - selle sisule lihtsalt liidetakse üks ja tulemus saadetakse funktsiooni getMonthName.

Kuna meie muutuja ei ole muutunud, siis järgmisel klikil on selles endiselt praegune kuu - ja midagi ei muutu.

Parandame probleemi:

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

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

Saab lihtsustada:

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

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

Teine viga

Sageli unustatakse, et kuu peab muutuma kindlas vahemikus - 0 kuni 11. Vahemiku piiri saavutamisel peame muutma aastat (edasi või tagasi), ja kuu lähtestama algväärtusele.

Teeme selle:

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