Vifungo vya Kuficha na Kuonyesha Kipengele kwa kutumia JavaScript

Katika sehemu hii tutajifunza kuficha na kuonyesha vipengele vya ukurasa. Kama kawaida, tutaanza kwa kitu rahisi, na hatua kwa hatua tutaifanya iwe ngumu zaidi.

Kwa ajili ya kuwasha moto mwili, hebu tuwe na aya na vifungo viwili:

<p id="elem">maandishi</p>
<input type="submit" id="show" value="onyesha">
<input type="submit" id="hide" value="ficha">

Tutaipata viungo kwenye vipengele vyu katika anuwai:

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

Sasa tufanye ipasavyo, ili kwa kubofya kwenye kifungo kimoja aya yetu ifichike, na kwa kifungo kingine - ionekane. Kwa ajili hii tutaipa au kuiondoa kipengele darasa inayofaa la CSS:

.hidden {
	display: none;
}

Tutatatua shida yetu:

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

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

Rekebisha msimbo wangu ili kuwa na kifungo kimoja tu. Acha kwa kubofya kwanza kwenye kifungo hiki kipengele kionekane, na kwa kubofya pili - kifichike.