JavaScript-de kalendary geçiş ýalňyşlygy

Geliň, kalendary geçiş üçin oklary ýasamak isleýäris. Bu ýagdaýda, birnäçe häsiýetli ýalňyşlyklara ýol berip bolýar. Geliň, olary gözden geçireliň.

Bizde geçiş düwmeleri we ýönekeýlik üçin kalendary däl-de, ýyl we aýyň adyny çykarjak element bolsun:

<button id="prev">öňki</button>
<div id="elem"></div>
<button id="next">indiki</button>

Elementlerimize salgylary alyň:

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

Şeýle hem, bizde parametri hökmünde aýyň nomerasyny kabul edýän we onyň adyny yzyna gaýtaryp berýän funksiýa bolsun:

function getMonthName(month) {
	let names = [
		'Ýan', 'Few', 'Mar', 'Apr', 'Maý', 'Iýn',
		'Iýl', 'Awg', 'Sen', 'Okt', 'Noý', 'Dek'
	];
	
	return names[month];
}

Geliň, sahypa ýükleneni bilen häzirki ýyl we aýy alyň:

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

Elementimizde ýyl we aýyň adyny çykaryň (kalendaryň ýerine goýma):

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

Geliň, indi geçirijilere klikleri işleýjileri goýup bereýliň:

prev.addEventListener('click', function() {
	// öňki aýy görkezýäris
});

next.addEventListener('click', function() {
	// indiki aýy görkezýäris
});

Indi, geçirijileri amala aşyrmakda näme ýaly ýalňyşlyklara ýol berip bolýandygyny gözden geçireliň.

Birnji ýalňyşlyk

Geliň, käbir programmist aýlary geçiriji düwmeleri şeýle amala aşyrdy:

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

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

Emma bu programmist, aýyň diňe birinji klikde geçýändigi, ýöne soňky kliklerde geçmeýändigi bilen netijelenýän ýalňyşlyga ýol berdi.

Sebäbi, month üýtgeýjisi funksiýalaryň içinde üýtgemeýär - diňe onuň mazmunyna bir goşulýar we netije getMonthName funksiýasyna iberilýär.

Üýtgeýjimiz üýtgemeýändigi üçin, indiki klikde onda öňki ýaly häzirki aý bolup galar - we hiç zat üýtgemeýär.

Meseläni düzelýäris:

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

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

Ýönekeýleşdirip bolýar:

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

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

Ikinji ýalňyşlyk

Köp wagtlary, aýyň kesgitlenen aralykda - 0-den 11-e çenli üýtgemelidigini ýatdan çykarýarlar. Aralygyň çägine ýetende biz ýyly (öňe ýa-da yza) üýtgetmeli, aýy bolsa başlangyç baş bahasyna getirmelidiris.

Munu edeliň:

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