Σφάλμα εναλλαγής ημερολογίου σε JavaScript

Ας υποθέσουμε ότι θέλουμε να δημιουργήσουμε βέλη για εναλλαγή ημερολογίου. Σε αυτή την περίπτωση μπορεί να γίνουν μια σειρά από χαρακτηριστικά λάθη. Ας τα εξετάσουμε.

Ας υποθέσουμε ότι έχουμε κουμπιά εναλλαγής και ένα στοιχείο στο οποίο για απλότητα θα εμφανίζουμε όχι το ημερολόγιο, αλλά απλώς το έτος και το όνομα του μήνα:

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

Ας πάρουμε αναφορές στα στοιχεία μας:

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

Ας υποθέσουμε ότι έχουμε επίσης μια συνάρτηση, η οποία δέχεται ως παράμετρο τον αριθμό του μήνα και επιστρέφει το όνομα του:

function getMonthName(month) {
	let names = [
		'Ιαν', 'Φεβ', 'Μαρ', 'Απρ', 'Μαϊ', 'Ιουν',
		'Ιουλ', 'Αυγ', 'Σεπ', 'Οκτ', 'Νοε', 'Δεκ'
	];
	
	return names[month];
}

Ας πάρουμε κατά τη φόρτωση της σελίδας το τρέχον έτος και μήνα:

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

Ας εμφανίσουμε στο στοιχείο μας το έτος και το όνομα του μήνα (προσομοίωση ημερολογίου):

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

Ας βάλουμε τώρα στους διακόπτες χειριστές κλικ:

prev.addEventListener('click', function() {
	// εμφανίζουμε τον προηγούμενο μήνα
});

next.addEventListener('click', function() {
	// εμφανίζουμε τον επόμενο μήνα
});

Ας εξετάσουμε τώρα, ποια λάθη μπορεί να γίνουν κατά την υλοποίηση των διακοπτών.

Πρώτο σφάλμα

Ας υποθέσουμε ότι κάποιος προγραμματιστής υλοποίησε τα κουμπιά εναλλαγής μηνών:

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

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

Αυτός ο προγραμματιστής, ωστόσο, έκανε ένα λάθος, λόγω του οποίου ο μήνας αλλάζει μόνο στο πρώτο κλικ, αλλά όχι στα επόμενα.

Το θέμα είναι ότι η μεταβλητή month δεν αλλάζει μέσα στις συναρτήσεις - απλώς προσθέτουν μονάδα στο περιεχόμενό της και το αποτέλεσμα στέλνεται στη συνάρτηση getMonthName.

Εφόσον η μεταβλητή μας δεν άλλαξε, τότε στο επόμενο κλικ θα περιέχει ακόμα τον τρέχοντα μήνα - και τίποτα δεν θα αλλάξει.

Ας διορθώσουμε το πρόβλημα:

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

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

Μπορούμε να απλοποιήσουμε:

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

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

Δεύτερο σφάλμα

Συχνά ξεχνάμε ότι ο μήνας πρέπει να αλλάζει σε ένα συγκεκριμένο εύρος - από 0 έως 11. Όταν φτάσουμε στο όριο του εύρους πρέπει να αλλάξουμε το έτος (προς τα εμπρός ή πίσω), και ο μήνας να επαναφέρεται στην αρχική τιμή.

Ας το κάνουμε αυτό:

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