Грешка при префрлување на календар во 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);
});