ความไม่สะดวกของคลาสใน JavaScript

สมมติว่าเรามีคลาสหลายคลาส สำหรับจัดรูปแบบข้อความ:

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

สมมติว่าในองค์ประกอบหนึ่งเราได้แสดง ข้อความสำเร็จและกำหนดคลาส ที่สอดคล้องกันสำหรับความสำเร็จให้กับมัน:

elem.classList.add('success');

สมมติว่าตอนนี้ในองค์ประกอบเดียวกันนี้ เราได้แสดงข้อความข้อผิดพลาดและกำหนด คลาสที่สอดคล้องกันสำหรับข้อผิดพลาดให้กับมัน:

elem.classList.add('error');

ผลลัพธ์ที่ได้คือในองค์ประกอบ จะมีสองคลาสที่ขัดแย้งกัน:

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

ปรากฎว่าก่อนที่จะเพิ่มคลาสใหม่ เราจะต้องลบคลาสก่อนหน้าออกก่อน:

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

สิ่งนี้ไม่สะดวกนัก เนื่องจากเราอาจจะ ไม่รู้ว่าคลาสก่อนหน้าคืออะไรกันแน่ และเราจะต้องลบ คลาสทั้งหมดออกตามลำดับ:

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

กำหนดอินพุต เมื่อสูญเสียโฟกัส ให้ตรวจสอบว่า ป้อนข้อความไม่เกิน 9 อักขระ หากเป็นเช่นนั้น ให้กำหนดสีขอบของอินพุต เป็นสีเขียว และหากไม่ใช่ - ให้กำหนดเป็นสีแดง