Pulsanti per nascondere e mostrare un elemento in JavaScript

In questa sezione impareremo a nascondere e mostrare gli elementi della pagina. Come al solito, inizieremo con qualcosa di semplice, e gradualmente aumenteremo la complessità.

Per riscaldarci, supponiamo di avere un paragrafo e due pulsanti:

html<p id="elem">testo</p>
<input type="submit" id="show" value="mostra">
<input type="submit" id="hide" value="nascondi">

Otteniamo i riferimenti ai nostri elementi in variabili:

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

Ora facciamo in modo che cliccando su un pulsante il nostro paragrafo venga nascosto, e sull' altro - venga mostrato. Assegneremo o rimuoveremo all'elemento la corrispondente classe CSS:

css.hidden {
  display: none;
}

Risolviamo il nostro compito:

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

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