Klasside ebamugavus JavaScriptis

Oletame, et meil on mitu klassi sõnumite stiilimiseks:

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

Oletame, et mõnes elemendis oleme kuvanud eduka sõnumi ja määranud sellele vastava edukusklassi:

elem.classList.add('success');

Oletame nüüd, et samas elemendis kuvasime veateate ja määrasime sellele vastava veaklassi:

elem.classList.add('error');

Selle tulemusena tekib olukord, kus elemendis on kaks teineteisega vastuolus olevat klassi:

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

Selgub, et enne uue klassi lisamist peame kõigepealt eelmise eemaldama:

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

See pole eriti mugav, kuna me võime ei tea, milline täpselt eelmine klass oli ja me peame eemaldama kõik klassid järjest:

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

Antud on sisendväli. Fookuse kaotamisel kontrollige, kas sinne on sisestatud mitte rohkem kui 9 märki. Kui nii on, värvige sisendvälja piir roheliseks, ja kui mitte - punaseks.