Kalender-Umschaltfehler in JavaScript

Angenommen, wir möchten Pfeile zum Umschalten des Kalenders erstellen. In diesem Fall kann man eine Reihe charakteristischer Fehler machen. Lassen Sie uns diese betrachten.

Angenommen, wir haben Schaltflächen zum Umschalten und ein Element, in das wir der Einfachheit halber keinen Kalender ausgeben, sondern einfach das Jahr und den Namen des Monats:

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

Holen wir uns Referenzen auf unsere Elemente:

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

Angenommen, wir haben auch eine Funktion, die als Parameter die Monatsnummer akzeptiert und deren Namen zurückgibt:

function getMonthName(month) {
	let names = [
		'янв', 'фев', 'мар', 'апр', 'май', 'июн',
		'июл', 'авг', 'сен', 'окт', 'ноя', 'дек'
	];
	
	return names[month];
}

Lassen Sie uns beim Laden der Seite das aktuelle Jahr und den Monat abrufen:

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

Geben wir in unserem Element das Jahr und den Namen des Monats aus (Imitation eines Kalenders):

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

Lassen Sie uns nun auf die Schaltflächen Klick-Handler setzen:

prev.addEventListener('click', function() {
	// zeige vorherigen Monat
});

next.addEventListener('click', function() {
	// zeige nächsten Monat
});

Betrachten wir nun, welche Fehler man bei der Implementierung der Schalter machen kann.

Erster Fehler

Angenommen, ein Programmierer hat die Schaltflächen zum Wechseln der Monate implementiert:

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

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

Dieser Programmierer hat jedoch einen Fehler gemacht, wegen dem der Monat nur beim ersten Klick umgeschaltet wird, aber nicht bei den folgenden.

Die Sache ist die, dass die Variable month sich nicht ändert innerhalb der Funktionen - zu ihrem Inhalt wird einfach Eins addiert/subtrahiert und das Ergebnis an die Funktion getMonthName übergeben.

Da sich unsere Variable nicht geändert hat, wird sie beim nächsten Klick nach wie vor den aktuellen Monat enthalten - und nichts wird sich ändern.

Lassen Sie uns das Problem beheben:

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

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

Man kann es vereinfachen:

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

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

Zweiter Fehler

Oft wird vergessen, dass sich der Monat in einem bestimmten Bereich ändern sollte - von 0 bis 11. Beim Erreichen der Bereichsgrenze müssen wir das Jahr ändern (vor oder zurück), und den Monat auf den Anfangswert zurücksetzen.

Lassen Sie uns das umsetzen:

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