Kalenderomkopplingsfel i JavaScript

Låt oss säga att vi vill skapa pilar för att växla kalender. I det här fallet kan man göra ett antal typiska misstag. Låt oss titta på dem.

Låt oss säga att vi har omkopplare och ett element där vi för enkelhetens skull kommer att visa inte en kalender, utan bara år och månadens namn:

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

Låt oss få referenser till våra element:

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

Låt oss också säga att vi har en funktion som tar månadsnumret som en parameter och returnerar dess namn:

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

Låt oss, när sidan laddas, hämta det aktuella året och månaden:

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

Låt oss visa år och månadens namn i vårt element (imitation av en kalender):

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

Låt oss nu lägga till klick-hanterare på omkopplarna:

prev.addEventListener('click', function() {
	// visa föregående månad
});

next.addEventListener('click', function() {
	// visa nästa månad
});

Låt oss nu överväga vilka misstag som kan göras när man implementerar omkopplare.

Första felet

Låt oss säga att en programmerare implementerade månadsomkopplingsknapparna så här:

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

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

Denna programmerare gjorde dock ett misstag, på grund av vilket månaden bara växlas vid det första klicket, men inte vid efterföljande.

Saken är att variabeln month inte ändras inuti funktionerna - dess innehåll läggs bara till med ett och resultatet skickas till funktionen getMonthName.

Eftersom vår variabel inte har ändrats, kommer den fortfarande att innehålla den aktuella månaden vid nästa klick - och ingenting kommer att ändras.

Låt oss åtgärda 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);
});

Det kan förenklas:

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

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

Andra felet

Man glömmer ofta att månaden måste ändras inom ett visst intervall - från 0 till 11. När gränsen för intervallet nås måste vi ändra år (framåt eller bakåt), och återställa månaden till dess initiala värde.

Låt oss göra det:

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