L'inconvénient des classes en JavaScript

Supposons que nous ayons plusieurs classes pour styliser les messages :

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

Supposons que dans un certain élément, nous ayons affiché un message de succès et lui ayons attribué la classe correspondante pour le succès :

elem.classList.add('success');

Supposons maintenant que dans ce même élément nous affichons un message d'erreur et lui attribuons la classe correspondante pour l'erreur :

elem.classList.add('error');

Il en résultera que l'élément aura deux classes en conflit l'une avec l'autre :

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

Il apparaît donc qu'avant d'ajouter une nouvelle classe, nous devons d'abord supprimer la précédente :

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

Ce n'est pas très pratique, car nous pouvons ne pas savoir quelle était exactement la classe précédente et nous devrons supprimer toutes les classes une par une :

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

Un champ de saisie est donné. Lors de la perte de focus, vérifiez qu'il ne contient pas plus de 9 caractères. Si c'est le cas, colorez la bordure du champ en vert, sinon - en rouge.