JavaScript-da kalendar almashish xatosi

Faraz qilaylik, kalendar almashish uchun o'qlar yaratmoqchimiz. Bu holda bir qancha xos xatolarga yo'l qo'yish mumkin. Keling, ularni ko'rib chiqaylik.

Faraz qilaylik, bizda almashish tugachalari va oddiy qilish uchun kalendarni emas, balki shunchaki yil va oy nomini chiqaradigan element mavjud:

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

Elementlarga havolalarni olamiz:

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

Faraz qilaylik, shuningdek, parametr sifatida oy raqamini qabul qiladigan va uning nomini qaytaradigan funktsiya mavjud:

function getMonthName(month) {
	let names = [
		'yan', 'fev', 'mar', 'apr', 'may', 'iyn',
		'iyl', 'avg', 'sen', 'okt', 'noy', 'dek'
	];
	
	return names[month];
}

Keling, sahifa yuklanganda joriy yil va oyni olamiz:

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

Elementimizga yil va oy nomini chiqaramiz (kalendarning imitatsiyasi):

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

Keling, endi almashgichlarga kliklar uchun ishlov beruvchilarni qo'shamiz:

prev.addEventListener('click', function() {
	// oldingi oyni ko'rsatamiz
});

next.addEventListener('click', function() {
	// keyingi oyni ko'rsatamiz
});

Keling, endi almashgichlarni amalga oshirishda qanday xatolarga yo'l qo'yish mumkinligini ko'rib chiqaylik.

Birinchi xato

Faraz qilaylik, qandaydir dasturchi oy almashish tugachalarni quyidagicha amalga oshirgan:

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

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

Biroq, bu dasturchi xatoga yo'l qo'ydi, buning natijasida oy faqat birinchi klikda o'zgaradi, keyingi kliklarda esa o'zgarmaydi.

Muammo shundaki, month o'zgaruvchisi funktsiyalar ichida o'zgarmaydi - uning tarkibiga shunchaki bitta qo'shiladi yoki ayiriladi va natija getMonthName funktsiyasiga yuboriladi.

O'zgaruvchimiz o'zgarmaganligi sababli, keyingi klikda unda hanuzgacha joriy oy turibdi - va hech narsa o'zgarmaydi.

Muammoni tuzatamiz:

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

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

Soddalashtirish mumkin:

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

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

Ikkinchi xato

Ko'pincha oy ma'lum bir diapazonda - 0 dan 11 gacha o'zgarishi kerakligi unutiladi. Diapazon chegarasiga yetganda biz yilni o'zgartirishimiz (oldinga yoki orqaga) va oyni boshlang'ich qiymatga qaytarishimiz kerak.

Buni amalga oshiramiz:

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