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

მოცემულია ინფუთი. ფოკუსის დაკარგვაზე შეამოწმეთ, რომ მასში არ არის შეყვანილი 9-ზე მეტი სიმბოლო. თუ ასეა, გაფერადეთ ინფუთის საზღვარი მწვანე ფერში, ხოლო თუ არა - წითელში.