Eroare de comutare a calendarului în JavaScript

Să presupunem că vrem să facem săgeți pentru comutarea calendarului. În acest caz, putem face o serie de erori caracteristice. Să le analizăm.

Să presupunem că avem butoane de comutare și un element în care, pentru simplitate, vom afișa nu un calendar, ci doar anul și numele lunii:

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

Să obținem referințele la elementele noastre:

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

Să presupunem că avem și o funcție, care primește ca parametru numărul lunii și returnează numele acesteia:

function getMonthName(month) {
	let names = [
		'ian', 'feb', 'mar', 'apr', 'mai', 'iun',
		'iul', 'aug', 'sep', 'oct', 'noi', 'dec'
	];
	
	return names[month];
}

Să obținem anul și luna curente la încărcarea paginii:

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

Să afișăm în elementul nostru anul și numele lunii (simulare calendar):

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

Să atașăm acum handler-e de click pe comutatoare:

prev.addEventListener('click', function() {
	// afișăm luna precedentă
});

next.addEventListener('click', function() {
	// afișăm luna următoare
});

Să analizăm acum ce erori putem face la implementarea comutatoarelor.

Eroarea prima

Să presupunem că un programator a implementat butoanele de comutare a lunilor:

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

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

Acest programator, totuși, a făcut o eroare, din cauza căreia luna se comută doar la primul click, dar nu și la cele ulterioare.

Faptul este că variabila month nu se modifică în interiorul funcțiilor - la conținutul ei se adaugă doar o unitate și rezultatul este trimis în funcția getMonthName.

Deoarece variabila noastră nu s-a schimbat, la următorul click în ea în continuare va fi luna curentă - și nimic nu se va schimba.

Să reparăm problema:

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

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

Putem simplifica:

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

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

Eroarea a doua

Deseori se uită faptul că luna ar trebui să se schimbe într-un anumit interval - de la 0 la 11. La atingerea limitei intervalului trebuie să schimbăm anul (înainte sau înapoi), iar luna să o resetăm la valoarea inițială.

Să facem asta:

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