Pogas elementa paslēpšanai un rādīšanai JavaScript

Šajā sadaļā mēs iemācīsimies paslēpt un rādīt lapas elementus. Kā parasti, sāksim ar kaut ko vienkāršu, un pakāpeniski to sarežģīsim.

Lai iesildītos, pieņemsim, ka mums ir rindkopa un divas pogas:

<p id="elem">teksts</p>
<input type="submit" id="show" value="rādīt">
<input type="submit" id="hide" value="paslēpt">

Iegūstam norādes uz mūsu elementiem mainīgajos:

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

Tagad darīsim tā, lai, noklikšķinot uz vienas pogas, mūsu rindkopa tiktu paslēpta, bet, noklikšķinot uz otras - rādīta. Šim nolūkam piešķirsim elementam atbilstošu CSS klasi vai noņemsim to:

.hidden {
	display: none;
}

Atrisināsim mūsu uzdevumu:

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

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

Modificējiet manu kodu tā, lai būtu tikai viena poga. Ļaujiet, lai pirmajā noklikšķinājumā uz šīs pogas elements tiktu rādīts, bet otrajā - paslēpts.