Knappar för att dölja och visa element med JavaScript

I det här avsnittet kommer vi att lära oss att dölja och visa element på en sida. Som vanligt, vi börjar med något enkelt och ökar gradvis svårighetsgraden.

Låt oss för att värma upp ha ett stycke och två knappar:

<p id="elem">text</p>
<input type="submit" id="show" value="visa">
<input type="submit" id="hide" value="dölj">

Låt oss hämta referenser till våra element till variabler:

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

Låt oss nu göra så att vid klick på en knapp döljs vårt stycke, och vid klick på den andra - visas. För att göra detta kommer vi att sätta eller ta bort motsvarande CSS-klass från elementet:

.hidden {
	display: none;
}

Låt oss lösa vår uppgift:

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

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

Modifiera min kod så att det bara finns en knapp. Låt vid första klicket på denna knapp visas elementet, och vid det andra - döljs.