Памылка пераключэння календара ў 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 = [
		'янв', 'фев', 'мар', 'апр', 'май', 'iюн',
		'iюл', 'авг', 'сен', 'окт', 'ноя', 'дек'
	];
	
	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);
});