Klasių nepatogumas JavaScript

Tarkime, kad turime keletą klasių pranešimų stilių:

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

Tarkime, kad kuriame nors elemente mes atvaizdavome sėkmingą pranešimą ir priskyrėme jam atitinkamą sėkmės klasę:

elem.classList.add('success');

Tarkime, kad dabar tame pačiame elemente atvaizdavome klaidos pranešimą ir priskyrėme jam atitinkamą klaidos klasę:

elem.classList.add('error');

Dėl to pasirodys, kad elemente bus dvi viena kitai prieštaraujančios klasės:

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

Pasirodo, kad prieš pridedant naują klasę, mums pirmiausia reikės pašalinti ankstesnę:

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

Tai nėra labai patogu, nes galime nežinoti, kokia tiksliai buvo ankstesnė klasė ir mums teks pašalinti visas klasės iš eilės:

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

Duotas įvesties laukas. Praradus fokusą patikrinkite, ar į jį įvesta ne daugiau kaip 9 simbolių. Jei taip, nudažykite įvesties lauko rėmelį žalia spalva, o jei ne - raudona.