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');
});

Менің кодымды бір түйме ғана болуы үшін өзгертіңіз. Бұл түймені бірінші рет басқанда элемент көрсетілсін, ал екінші рет басқанда - жасырылсын.