Elementin göstərilməsi və gizlədilməsi üçün düymələr JavaScript-də

Bu bölmədə biz səhifə elementlərini gizlətməyi və göstərməyi öyrənəcəyik. Həmişəki kimi, sadə bir şeydən başlayacağıq və tədricən mürəkkəbləşdirəcəyik.

İdman üçün bizdə bir abzas və iki düymə olsun:

<p id="elem">mətn</p>
<input type="submit" id="show" value="göstər">
<input type="submit" id="hide" value="gizlə">

Elementlərimizə istinadları dəyişənlərə əldə edək:

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

Gəlin indi elə edək ki, bir düyməyə kliklədikdə bizim abzasımız gizlənsin, digərinə kliklədikdə isə görünsün. Bunun üçün elementə uyğun CSS sinifi verək ya da onu götürək:

.hidden {
	display: none;
}

Problemimizi həll edək:

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

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

Mənim kodumu elə dəyişin ki, yalnız bir düymə olsun. Bu düyməyə birinci klikdə element görünsün, ikinci klikdə isə gizlənsin.