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