JavaScript-de elementi gizlemek we görkezmek üçin düwmeler

Bu bölümde biz sahypanyň elementlerini gizlemegi we görkezmegi öwreneris. Her zaman ýaly, ýönekeý bir zatdan başlap, aýratynlaşdyryp barar.

Gimnastika üçin biziň bir abzas we iki düwmesi bolsun:

<p id="elem">tekst</p>
<input type="submit" id="show" value="görkez">
<input type="submit" id="hide" value="gizle">

Elementlerimize çykgytlary üýtgeýjilere alyň:

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

Indi edeliň, bir düwme basylanda biziň abzasymyz gizlensin, beýlekisine basylanda bolsa görkezilsin. Bunuň üçin elemente degişli CSS klasyny bereris ýa-da aýyrarys:

.hidden {
	display: none;
}

Meselemyzy çözeliň:

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

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

p> Meniň kodymy üýtgediň, diňe bir düwme bolsun. Bu düwmäniň ilkinji basylyşynda element görkezilsin, ikinji basylyşynda bolsa - gizlensin.