Η Ανεμπόδιστη Χρήση των Κλάσεων στο JavaScript

Ας υποθέσουμε ότι έχουμε πολλές κλάσεις για το στυλ των μηνυμάτων:

.success {
	color: green;
}
.warning {
	color: orange;
}
.error {
	color: red;
}

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

elem.classList.add('success');

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

elem.classList.add('error');

Ως αποτέλεσμα, θα προκύψει ότι στο στοιχείο θα υπάρχουν δύο κλάσεις που αλληλοσυγκρούονται μεταξύ τους:

<div id="elem" class="success error">
	text
</div>

Αποδεικνύεται ότι πριν προσθέσουμε τη νέα κλάση, θα πρέπει πρώτα να αφαιρέσουμε την προηγούμενη:

elem.classList.remove('success');
elem.classList.add('error');

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

elem.classList.remove('success');
elem.classList.remove('warning');
elem.classList.add('error');

Δίνεται ένα πεδίο εισαγωγής. Όταν χάνει το focus ελέγξτε αν έχουν εισαχθεί όχι περισσότεροι από 9 χαρακτήρες. Εάν είναι έτσι, βάψτε το περίγραμμα του πεδίου εισαγωγής σε πράσινο χρώμα, και εάν δεν είναι - σε κόκκινο.