Kalendāra pārslēgšanas kļūda JavaScript

Pieņemsim, ka mēs vēlamies izveidot bultas kalendāra pārslēgšanai. Šajā gadījumā var pieļaut vairākas raksturīgas kļūdas. Apskatīsim tās.

Pieņemsim, ka mums ir pārslēgšanas pogas un elements, kurā vienkāršības labad parādīsim nevis kalendāru, bet tikai gadu un mēneša nosaukumu:

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

Iegūsim atsauces uz mūsu elementiem:

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

Pieņemsim, ka mums ir arī funkcija, kas parametru pieņem mēneša numuru un atgriež tā nosaukumu:

function getMonthName(month) {
	let names = [
		'jan', 'feb', 'mar', 'apr', 'mai', 'jūn',
		'jūl', 'aug', 'sep', 'okt', 'nov', 'dec'
	];
	
	return names[month];
}

Ielādējot lapu, iegūstam pašreizējo gadu un mēnesi:

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

Parādīsim mūsu elementā gadu un mēneša nosaukumu (kalendāra imitācija):

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

Tagad uzliksim pārslēdzējiem klikšķa apstrādes funkcijas:

prev.addEventListener('click', function() {
	// rāda iepriekšējo mēnesi
});

next.addEventListener('click', function() {
	// rāda nākamo mēnesi
});

Tagad apskatīsim, kādas kļūdas var pieļaut, realizējot pārslēdzējus.

Pirmā kļūda

Pieņemsim, ka kāds programmētājs realizēja mēnešu pārslēgšanas pogas:

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

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

Šis programmētājs tomēr pieļāva kļūdu, kuras dēļ mēnesis pārslēdzas tikai pēc pirmā klikšķa, bet ne pēc nākamajiem.

Lieta ir tāda, ka mainīgais month nemainās funkciju iekšienē - tā saturs tiek vienkārši palielināts par vienu un rezultāts tiek nosūtīts uz funkciju getMonthName.

Tā kā mūsu mainīgais nav mainījies, tad nākamajā klikšķī tajā joprojām būs pašreizējais mēnesis - un nekas nemainīsies.

Izlabosim problēmu:

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

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

Var vienkāršot:

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

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

Otrā kļūda

Bieži aizmirst, ka mēnesim jāmainās noteiktā diapazonā - no 0 līdz 11. Sasniedzot diapazona robežu, mums jāmaina gads (uz priekšu vai atpakaļ), un mēnesi jāatiestata sākotnējā vērtībā.

Izpildīsim 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);
});