Kalenderwisselfout in JavaScript

Kom ons sê ons wil pyle maak om die kalender te wissel. In hierdie geval kan 'n mens 'n paar kenmerkende foute maak. Laat ons dit ondersoek.

Kom ons sê ons het wisselknoppies en 'n element waarin ons vir eenvoud nie die kalender sal vertoon nie, maar net die jaar en die naam van die maand:

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

Kom ons kry verwysings na ons elemente:

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

Kom ons sê ons het ook 'n funksie wat 'n maandnommer as parameter aanvaar en sy naam teruggee:

function getMonthName(month) {
	let names = [
		'Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun',
		'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Des'
	];
	
	return names[month];
}

Laat ons by die bladsy se lading die huidige jaar en maand kry:

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

Kom ons vertoon die jaar en die naam van die maand in ons element (kalender-nabootsing):

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

Laat ons nou klikhanteerders op die wisselaars hang:

prev.addEventListener('click', function() {
	// wys die vorige maand
});

next.addEventListener('click', function() {
	// wys die volgende maand
});

Kom ons kyk nou na watter foute jy kan maak wanneer jy die wisselaars implementeer.

Eerste fout

Kom ons sê 'n sekere programmeerder het die maandwisselknoppies geïmplementeer:

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

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

Hierdie programmeerder het egter 'n fout gemaak, waardeur die maand slegs by die eerste klik gewissel word, maar nie by daaropvolgende klikke nie.

Die ding is dat die veranderlike month nie verander binne die funksies nie - een word eenvoudig by sy inhoud gevoeg en die resultaat word na die funksie getMonthName gestuur.

Aangesien ons veranderlike nie verander het nie, sal die huidige maand steeds daarin lê by die volgende klik - en niks sal verander nie.

Kom ons los die probleem op:

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

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

Dit kan vereenvoudig word:

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

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

Tweede fout

Daar word dikwels vergeet dat die maand binne 'n sekere reeks moet verander - van 0 tot 11. Wanneer die reeks se grens bereik word, moet ons die jaar verander (vorentoe of agteruit), en die maand na die begin- waarde terugstel.

Kom ons doen dit:

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