Տարրի թաքցնելու և ցուցադրելու կոճակները JavaScript-ով

Այս բաժնում մենք կսովորենք թաքցնել և ցուցադրել էջի տարրերը: Ինչպես միշտ, կսկսենք պարզից, և աստիճանաբար կբարդացնենք:

Ունենք, օրինակ, պարբերություն և երկու կոճակ.

html<p id="elem">տեքստ</p>
<input type="submit" id="show" value="ցուցադրել">
<input type="submit" id="hide" value="թաքցնել">

Ստացնենք մեր տարրերի հղումները փոփոխականների մեջ.

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

Այժմ եկեք անենք այնպես, որ մի կոճակի վրա կտտացնելիս մեր պարբերությունը թաքնվի, իսկ մյուսի վրա կտտացնելիս՝ ցուցադրվի: Դրա համար տարրին կտանք կամ կհեռացնենք համապատասխան CSS դասը.

css.hidden {
  display: none;
}

Լուծենք մեր խնդիրը.

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

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