ජාවාස්ක්රිප්ට් හි මූලද්රව්යයක් සඟවා දැක්වීම සඳහා බොත්තම්
මෙම කොටසෙන්, අපි පිටුවේ මූලද්රව්ය සඟවා දැක්වීම ඉගෙන ගනිමු. සාමාන්ය පරිදි, අපි සරල දෙයකින් ආරම්භ කර, ක්රමයෙන් සංකීර්ණ කරන්නෙමු.
අපගේ රිදවීම සඳහා අපට ඡේදයක් සහ බොත්තම් දෙකක් ඇතැයි සිතමු:
<p id="elem">text</p>
<input type="submit" id="show" value="show">
<input type="submit" id="hide" value="hide">
විචල්යයන් තුළ අපගේ මූලද්රව්ය වෙත සබැඳි ලබා ගනිමු:
let elem = document.querySelector('#elem');
let show = document.querySelector('#show');
let hide = document.querySelector('#hide');
දැන් අපි කරමු, එක් බොත්තමක් මත ක්ලික් කිරීමෙන් අපගේ ඡේදය සඟවන අතර, අනෙක් බොත්තම මත - එය පෙන්වයි. මේ සඳහා අපි අදාළ CSS පන්තිය ලබා දෙන්නෙමු හෝ ඉවත් කරන්නෙමු:
.hidden {
display: none;
}
අපගේ කාර්යය විසඳමු:
hide.addEventListener('click', function() {
elem.classList.add('hidden');
});
show.addEventListener('click', function() {
elem.classList.remove('hidden');
});
බොත්තම් එකක් පමණක් තිබෙන පරිදි මගේ කේතය වෙනස් කරන්න. මෙම බොත්තම මත පළමු ක්ලික් කිරීමෙන් මූලද්රව්යය පෙන්වන්න, සහ දෙවැන්නෙන් - සඟවන්න.
