Disadvantage in using classes in JavaScript

Suppose we have several classes for styling messages:

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

Suppose we displayed a successful message in some element and assigned it the appropriate class for success:


Let us now display an error message in the same element and assign it the appropriate class for an error:


As a result, it will turn out that the element will have two classes that conflict with each other:

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

It turns out that before adding a new class, we will first have to remove the previous one:

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

This is not very convenient, since we may not know what the previous class was there and we will have to remove all classes in a row:

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

Given an input. When focus is lost, check that no more than 9 characters have been entered into it. If so, color the input's border green, and if not, color it red.