Klašu neērtības JavaScript

Pieņemsim, ka mums ir vairākas klases ziņojumu noformēšanai:

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

Pieņemsim, ka kādā elementā mēs esam attēlojuši veiksmīgu ziņojumu un tam piešķīrusi atbilstošu veiksmes klasi:

elem.classList.add('success');

Pieņemsim, ka tagad mēs šajā pašā elementā esam attēlojuši kļūdas ziņojumu un tam piešķīrusi atbilstošu kļūdas klasi:

elem.classList.add('error');

Rezultātā izrādīsies, ka elementā būs divas viena otrai pretrunīgas klases:

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

Izrādās, ka pirms jaunas klases pievienošanas mums vispirms būs jānoņem iepriekšējā:

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

Tas nav īpaši ērti, jo mēs, iespējams, nezinām, kura tieši bija iepriekšējā klase, un mums nāksies noņemt visas klases pēc kārtas:

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

Dots input. Pēc fokusa zaudēšanas pārbaudiet, vai tajā ir ievadītas ne vairāk kā 9 simboli. Ja tas tā ir, iekrāsojiet inputa apmali zaļā krāsā, ja ne - sarkanā.