Տարրի թաքցնելու և ցուցադրելու կոճակները 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');
});

Փոփոխեք իմ կոդն այնպես, որ լինի միայն մեկ կոճակ: Թող այս կոճակի առաջին կտտոցով տարրը ցուցադրվի, իսկ երկրորդով՝ թաքնվի: