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:
elem.classList.add('success');
Let us now display an error message in the same element and assign it the appropriate class for an error:
elem.classList.add('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.