Грешка при превключване на календар в JavaScript

Да предположим, че искаме да направим стрелки за превключване на календара. В този случай може да се допуснат редица характерни грешки. Нека ги разгледаме.

Да предположим, че имаме бутони за превключване и елемент, в който за простота ще извеждаме не календар, а просто година и име на месеца:

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

Нека получим референции към нашите елементи:

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

Да предположим, че имаме и функция, която приема параметър номер на месеца и връща неговото име:

function getMonthName(month) {
	let names = [
		'яну', 'фев', 'мар', 'апр', 'май', 'юни',
		'юли', 'авг', 'сеп', 'окт', 'ное', 'дек'
	];
	
	return names[month];
}

Нека при зареждане на страницата получим текущата година и месец:

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

Нека изведем в нашия елемент годината и името на месеца (имитация на календар):

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

Нека сега на превключвачите да добавим манипулатори на кликвания:

prev.addEventListener('click', function() {
	// показваме предходния месец
});

next.addEventListener('click', function() {
	// показваме следващия месец
});

Нека сега разгледаме какви грешки може да бъдат допуснати при имплементацията на превключвачите.

Първа грешка

Да предположим, че някой програмист реализирал бутоните за превключване на месеците по следния начин:

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

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

Този програмист обаче допуснал грешка, поради която месецът се превключва само при първото кликване, но не и при следващите.

Работата е там, че променливата month не се променя вътре във функциите - към нейното съдържание просто се добавя единица и резултатът се изпраща към функцията getMonthName.

Тъй като нашата променлива не се е променила, то при следващо кликване в нея ще остава текущият месец - и нищо няма да се промени.

Нека поправим проблема:

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

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

Може да се опрости:

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

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

Втора грешка

Често се забравя, че месецът трябва да се променя в определен диапазон - от 0 до 11. При достигане на границата на диапазона трябва да променим годината (напред или назад), а месеца да върнем в начална стойност.

Нека направим това:

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