JavaScript-də Təqvim Dəyişmə Xətası

Tutaq ki, təqvimi dəyişdirmək üçün ox düymələri etmək istəyirik. Bu halda bir sıra xarakterik xətalar etmək olar. Gəlin onları nəzərdən keçirək.

Tutaq ki, bizim dəyişdirmə düymələrimiz var və biz sadəlik üçün içinə təqvim yox, sadəcə ili və ayın adını çıxaracağımız element:

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

Elementlərimizə istinadları alaq:

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

Tutaq ki, bizim həmçinin parametr kimi ayın nömrəsini qəbul edən və onun adını qaytaran funksiyamız var:

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

Gəlin səhifə yüklənəndə cari ili və ayı alaq:

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

Elementimizə ili və ayın adını çıxaraq (təqvimin təqlidi):

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

Gəlin indi dəyişdiricilərə klik üçün hadisə emal funksiyalarını əlavə edək:

prev.addEventListener('click', function() {
	// əvvəlki ayı göstəririk
});

next.addEventListener('click', function() {
	// növbəti ayı göstəririk
});

İndi gəlin dəyişdiricilərin tətbiqində edilə biləcək xətaları nəzərdən keçirək.

Birinci xəta

Tutaq ki, müəyyən proqramçı ayları dəyişmək üçün düymələri belə tətbiq etdi:

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

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

Lakin bu proqramçı elə bir xəta etdi ki, onun sayəsində ay yalnız birinci klikdə dəyişir, sonrakı kliklərdə isə dəyişmir.

Məsələ ondadır ki, month dəyişəni funksiyaların daxilində dəyişmir - onun məzmununa sadəcə bir əlavə edilir və nəticə getMonthName funksiyasına göndərilir.

Dəyişənimiz dəyişmədiyi üçün növbəti klikdə onda hələ də cari ay olacaq - və heç nə dəyişməyəcək.

Problemi düzəldək:

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

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

Sadələşdirmək olar:

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

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

İkinci xəta

Tez-tez unudulur ki, ay müəyyən diapozon daxilində dəyişməlidir - 0-dan 11-ə qədər. Diapozonun sərhədinə çatdıqda ili (irəli və ya geri) dəyişdirməli, ayı isə ilkin dəyərə sıfırlamalıyıq.

Gəlin bunu edək:

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