Тугмаҳо барои пинҳон кардан ва нишон додани унсур дар JavaScript

Дар ин қисм мо меомӯзем, ки унсурҳои саҳифаро пинҳон кунем ва нишон диҳем. Ҳамагӣ тавре ки одӣ аст, аз чизе одӣ оғоз мекунем ва ба тадриҷ мураккабтар мекунем.

Бигзор барои гарм кардан абзас ва ду тугма дошта бошем:

<p id="elem">матн</p>
<input type="submit" id="show" value="нишон">
<input type="submit" id="hide" value="пинҳон">

Истинодҳоро ба унсурҳои мо дар тағирёбандаҳо мегирем:

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

Акнун биёед чункино кунем, то ки бо зер кардан як тугма абзаси мо пинҳон шавад, ва бо дигараш - нишон дода шавад. Барои ин ба унсур синфи CSS-и мувофиқро медиҳем ё мебардорем:

.hidden {
	display: none;
}

Масъалаи худро ҳал мекунем:

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

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

Коди маро тағир диҳед, то ки танҳо як тугма бошад. Бигзор бо клики аввал бар ин тугма унсур нишон дода шавад, ва бо клики дуюм - пинҳон шавад.