Feil ved bytting av kalender i JavaScript

La oss si at vi ønsker å lage piler for å bytte kalender. I dette tilfellet kan man gjøre en rekke typiske feil. La oss se på dem.

La oss si at vi har bytteknapper og et element, hvor vi for enkelthets skyld vil vise ikke en kalender, men bare år og månedsnavn:

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

La oss hente referanser til våre elementer:

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

La oss si at vi også har en funksjon, som tar månedsnummer som parameter og returnerer dets navn:

function getMonthName(month) {
	let names = [
		'jan', 'feb', 'mar', 'apr', 'mai', 'jun',
		'jul', 'aug', 'sep', 'okt', 'nov', 'des'
	];
	
	return names[month];
}

La oss ved sidelasting hente gjeldende år og måned:

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

La oss vise i vårt element år og navn på måneden (imitasjon av kalender):

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

La oss nå sette opp klikk-handterere på bytterne:

prev.addEventListener('click', function() {
	// viser forrige måned
});

next.addEventListener('click', function() {
	// viser neste måned
});

La oss nå se på hvilke feil som kan gjøres ved implementering av bytterne.

Første feil

La oss si at en programmerer implementerte knapper for å bytte måneder:

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

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

Denne programmereren gjorde imidlertid en feil, på grunn av hvilken måneden byttes bare ved det første klikket, men ikke ved de påfølgende.

Saken er at variabelen month ikke endres inni funksjonene - innholdet legges bare til en enhet og resultatet sendes til funksjonen getMonthName.

Siden variabelen vår ikke er endret, vil den ved neste klikk fortsatt inneholde gjeldende måned - og ingenting vil endre seg.

La oss fikse problemet:

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

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

Kan forenkles:

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

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

Andre feil

Man glemmer ofte at måneden skal endres innenfor et visst område - fra 0 til 11. Ved å nå grensen for området må vi endre år (fremover eller tilbake), og tilbakestille måneden til startverdien.

La oss gjøre dette:

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