Knoppe om elemente op JavaScript te verberg en te wys

In hierdie afdeling sal ons leer om elemente op die bladsy te verberg en te wys. Soos gewoonlik, begin ons met iets eenvoudigs, en ons sal geleidelik kompliseer.

Laat ons vir die opwarming 'n paragraaf en twee knoppies hê:

<p id="elem">teks</p>
<input type="submit" id="show" value="wys">
<input type="submit" id="hide" value="verberg">

Kry verwysings na ons elemente in veranderlikes:

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

Laat ons nou maak dat met 'n klik op die een knoppie ons paragraaf verdwyn, en op die ander een - verskyn. Ons sal dit doen deur die element die ooreenstemmende CSS-klas te gee of te verwyder:

.hidden {
	display: none;
}

Los ons taak op:

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

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

Wysig my kode sodat daar slegs een knoppie is. Laat met die eerste klik op hierdie knoppie die element verskyn, en met die tweede - verdwyn.