ජාවාස්ක්‍රිප්ට් හි මූලද්‍රව්යයක් සඟවා දැක්වීම සඳහා බොත්තම්

මෙම කොටසෙන්, අපි පිටුවේ මූලද්‍රව්ය සඟවා දැක්වීම ඉගෙන ගනිමු. සාමාන්‍ය පරිදි, අපි සරල දෙයකින් ආරම්භ කර, ක්‍රමයෙන් සංකීර්ණ කරන්නෙමු.

අපගේ රිදවීම සඳහා අපට ඡේදයක් සහ බොත්තම් දෙකක් ඇතැයි සිතමු:

html<p id="elem">text</p>
<input type="submit" id="show" value="show">
<input type="submit" id="hide" value="hide">

විචල්‍යයන් තුළ අපගේ මූලද්‍රව්ය වෙත සබැඳි ලබා ගනිමු:

javascriptlet elem = document.querySelector('#elem');
let show = document.querySelector('#show');
let hide = document.querySelector('#hide');

දැන් අපි කරමු, එක් බොත්තමක් මත ක්ලික් කිරීමෙන් අපගේ ඡේදය සඟවන අතර, අනෙක් බොත්තම මත - එය පෙන්වයි. මේ සඳහා අපි අදාළ CSS පන්තිය ලබා දෙන්නෙමු හෝ ඉවත් කරන්නෙමු:

css.hidden {
  display: none;
}

අපගේ කාර්යය විසඳමු:

javascripthide.addEventListener('click', function() {
  elem.classList.add('hidden');
});

show.addEventListener('click', function() {
  elem.classList.remove('hidden');
});