Usumbufu wa Madarasa katika JavaScript

Wacha tuwe na madarasa kadhaa ya mitindo ya ujumbe:

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

Wacha katika kipengele fulani tumeonyesha ujumbe wa mafanikio na tukampeana darasa linalofanana kwa mafanikio:

elem.classList.add('success');

Wacha sasa katika kipengele hiki hiki tumeonyesha ujumbe wa hitilafu na tukampeana darasa linalofanana kwa hitilafu:

elem.classList.add('error');

Kama matokeo, itatokea kwamba kipengele kitakuwa na madarasa mawili yanayopingana:

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

Inabadilika kuwa kabla ya kuongeza darasa jipya, tutalazimika kwanza kuondoa la awali:

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

Hii si rahisi sana, kwani sisi huenda tusijue ni darasa gani hasa lilikuwepo na tutalazimika kuondoa madarasa yote mfululizo:

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

Akipitiwa ingizo. Kwa kupoteza mwelekeo angalia, kwamba ndani yake haijaingizwa zaidi ya 9 herufi. Ikiwa ni hivyo, rangi mpaka wa ingizo kwa rangi ya kijani, na ikiwa si hivyo - kwa nyekundu.