Kalendario perjungimo klaida JavaScript

Tarkime, norime padaryti rodykles kalendoriui perjungti. Šiuo atveju galima padaryti keletą būdingų klaidų. Pažiūrėkime į jas.

Tarkime, kad turime perjungimo mygtukus ir elementą, į kurį paprastumo dėlei rodysime ne kalendorių, o tik metus ir mėnesio pavadinimą:

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

Gaukime nuorodas į mūsų elementus:

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

Tarkime, kad taip pat turime funkciją, kuri parametru priima mėnesio numerį ir grąžina jo pavadinimą:

function getMonthName(month) {
	let names = [
		'Saus.', 'Vas.', 'Kov.', 'Bal.', 'Geg.', 'Bir.',
		'Liep.', 'Rugp.', 'Rugs.', 'Spal.', 'Lapkr.', 'Gruod.'
	];
	
	return names[month];
}

Kai puslapis užsikrauna, gaukime dabartinius metus ir mėnesį:

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

Atvaizduokime mūsų elemente metus ir mėnesio pavadinimą (kalendoriaus imitacija):

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

Dabar uždėkime paspaudimo apdorotojus ant perjungiklių:

prev.addEventListener('click', function() {
	// rodome ankstesnį mėnesį
});

next.addEventListener('click', function() {
	// rodome kitą mėnesį
});

Dabar apsvarstykime, kokias klaidas galima padaryti įgyvendinant perjungiklius.

Pirmoji klaida

Tarkime, kuris nors programuotojas įgyvendino mėnesių perjungimo mygtukus:

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

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

Šis programuotojas, tačiau, padarė klaidą, dėl kurios mėnuo perjungiamas tik pirmu paspaudimu, bet ne vėlesniais.

Reikalas tas, kad kintamasis month nekeičiamas viduje funkcijų - prie jo turinio tiesiog pridedamas vienetas ir rezultatas siunčiamas į funkciją getMonthName.

Kadangi mūsų kintamasis nepasikeitė, tai su kitu paspaudimu jame vis tiek bus dabartinis mėnuo - ir niekas nesikeis.

Išspręskime problemą:

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

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

Galima supaprastinti:

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

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

Antroji klaida

Dažnai pamirštama, kad mėnuo turi keistis tam tikrame diapazone - nuo 0 iki 11. Pasiekus diapazono ribą turime pakeisti metus (pirmyn arba atgal), o mėnesį nustatyti į pradinę reikšmę.

Padarykime tai:

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