Boutons pour masquer et afficher un élément en JavaScript

Dans cette section, nous apprendrons à masquer et à afficher les éléments de la page. Comme d'habitude, commençons par quelque chose de simple, et compliquons progressivement.

Supposons pour l'échauffement que nous ayons un paragraphe et deux boutons :

html<p id="elem">text</p>
<input type="submit" id="show" value="show">
<input type="submit" id="hide" value="hide">

Obtenons les références à nos éléments dans des variables :

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

Faisons maintenant en sorte qu'au clic sur un bouton notre paragraphe soit masqué, et sur l'autre - soit affiché. Pour cela, nous allons ajouter ou supprimer la classe CSS correspondante à l'élément :

css.hidden {
  display: none;
}

Résolvons notre tâche :

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

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