Nupud elemendi peitmiseks ja näitamiseks JavaScriptis

Selles jaotises õpime lehe elemente peitma ja näitama. Nagu tavalt, alustame millegi lihtsast ja järk-järgult keerustame.

Soojenduseks olgu meil lõik ja kaks nuppu:

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

Hankige viidad meie elementidele muutujatesse:

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

Teeme nüüd nii, et klõpsates ühel nupul meie lõik peidatakse ja teisel nupul - näidatakse. Anname selleks elemendile või eemaldame vastava CSS klassi:

css.hidden {
  display: none;
}

Lahendame oma ülesande:

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

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