Kalenterin vaihtovirhe JavaScriptissä

Oletetaan, että haluamme tehdä nuolet kalenterin vaihtamiseen. Tässä tapauksessa voidaan tehdä useita tyypillisiä virheitä. Tarkastellaan niitä.

Oletetaan, että meillä on vaihtonapit ja elementti, johon yksinkertaisuuden vuoksi tulostamme kalenterin sijasta vain vuoden ja kuukauden nimen:

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

Haetaan viittaukset elementteihimme:

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

Oletetaan myös, että meillä on funktio, joka parametrina vastaanottaa kuukauden numeron ja palauttaa sen nimen:

function getMonthName(month) {
	let names = [
		'tammi', 'helmi', 'maalis', 'huhti', 'touko', 'kesä',
		'heinä', 'elo', 'syys', 'loka', 'marras', 'joulu'
	];
	
	return names[month];
}

Haetaan sivun latautuessa nykyinen vuosi ja kuukausi:

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

Tuodaan elementtiimme vuosi ja kuukauden nimi (kalenterin simulointi):

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

Lisätään nyt vaihtimille klikkauskäsittelijät:

prev.addEventListener('click', function() {
	// näytetään edellinen kuukausi
});

next.addEventListener('click', function() {
	// näytetään seuraava kuukausi
});

Tarkastellaan nyt, mitä virheitä voidaan tehdä vaihtimien toteutuksessa.

Ensimmäinen virhe

Oletetaan, että tietty ohjelmoija toteutti kuukausien vaihtopainikkeet:

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

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

Tämä ohjelmoija kuitenkin teki virheen, jonka vuoksi kuukausi vaihtuu vain ensimmäisellä klikillä, mutta ei seuraavilla.

Asia on siinä, että muuttuja month ei muutu funktioiden sisällä - sen sisältöön lisätään vain yksi ja tulos lähetetään funktiolle getMonthName.

Koska muuttujamme ei muuttunut, seuraavassa klikkauksessa siinä on edelleen nykyinen kuukausi - eikä mikään muutu.

Korjataan ongelma:

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

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

Voidaan yksinkertaistaa:

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

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

Toinen virhe

Usein unohdetaan, että kuukauden tulee muuttua tietyssä alueessa - 0:sta 11:een. Kun alueen raja saavutetaan, meidän on muutettava vuotta (eteen- tai taaksepäin), ja kuukausi palautetaan alkuperäiseen arvoon.

Tehdään tämä:

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