Elementni yashirish va ko'rsatish tugmalari JavaScriptda

Ushbu bo'limda biz sahifa elementlarini yashirish va ko'rsatishni o'rganamiz. Odatiy kabi, oddiy narsalardan boshlaymiz, va asta-sekin murakkablashtiramiz.

Ishni isitish uchun bizda abzas va ikkita tugma bo'lsin:

<p id="elem">matn</p>
<input type="submit" id="show" value="ko'rsatish">
<input type="submit" id="hide" value="yashirish">

Elementlarimizga havolalarni o'zgaruvchilarga olaylik:

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

Keling endi, bitta tugma bosilganda abzasimiz yashirilsin, ikkinchisida esa - ko'rinsin. Buning uchun elementga mos CSS klassini beramiz yoki olib tashlaymiz:

.hidden {
	display: none;
}

Vazifamizni yechamiz:

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

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

Mening kodimni shunday o'zgartiringki, faqat bitta tugma bo'lsin. Ushbu tugmani birinchi marta bosganda element ko'rinsin, ikkinchi marta bosganda - yashirilsin.