ජාවාස්ක්රිප්ට් හි පන්තිවල අපහසුතාව
පණිවිඩ හැඩගැස්වීම සඳහා පන්ති කිහිපයක් අප සතුව ඇතැයි සිතමු:
.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 ට වඩා අඩු ගණනක් ඇතුළත් කර ඇති බව.
එසේ නම්, අන්පුට් එකේ මායිම කොළ පාටට වර්ණාලේප කරන්න,
නොමැති නම් - රතු පාටට.
