Mygtukai elemento paslėpimui ir atvaizdavimui JavaScript

Šiame skyriuje išmoksime paslėpti ir atvaizduoti puslapio elementus. Kaip įprasta, pradėsime nuo kažko paprasto, ir palaipsniui sudėtinsime.

Tegul apšilimui turime pastraipą ir du mygtukus:

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

Gaukime nuorodas į mūsų elementus kintamuosiuose:

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

Dabar padarykime taip, kad paspaudus vieną mygtuką mūsų pastraipa pasislėptų, o ant kito - būtų rodoma. Tam suteiksime arba pašalinsime elementui atitinkamą CSS klasę:

.hidden {
	display: none;
}

Išspręskime mūsų užduotį:

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

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

Modifikuokite mano kodą taip, kad būtų tik vienas mygtukas. Tegul pirmu paspaudimu šį mygtuką elementas rodomas, o antru - paslėpiamas.