Luokkien hankaluus JavaScriptissä

Oletetaan, että meillä on useita tyyliluokkia viestien muotoiluun:

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

Oletetaan, että jossain elementissä olemme näyttäneet onnistumisviestin ja antaneet sille vastaavan onnistumisen luokan:

elem.classList.add('success');

Oletetaan nyt, että samassa elementissä olemme näyttäneet virheviestin ja antaneet sille vastaavan virheen luokan:

elem.classList.add('error');

Tuloksena saadaan, että elementissä on kaksi toistensa kanssa ristiriidassa olevaa luokkaa:

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

Käy ilmi, että ennen uuden luokan lisäämistä meidän on ensin poistettava edellinen:

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

Tämä ei ole kovin kätevää, koska emme voi tietää, mikä tarkalleen oli edellinen luokka ja meidän on poistettava kaikki luokat peräkkäin:

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

Annettu syöttökenttä. Tarkista kohdistimen menetyksen yhteydessä, että siihen on syötetty enintään 9 merkkiä. Jos näin on, väritä syöttökentän reuna vihreäksi, muuten punaiseksi.