Дугмићи за сакривање и приказ елемента у 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');
});