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:

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

Hankige viidad meie elementidele muutujatesse:

let 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:

.hidden {
	display: none;
}

Lahendame oma ülesande:

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

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

Modifitseerige minu koodi nii, et oleks ainult üks nupp. Olgu esimesel klõpsul sellel nupul element näidatud ja teisel klõpsul - peidetud.