Tempo di lettura dell'articolo 1 minuti

Una cosa semplice è veloce ma sempre molto utile è abilitare e disabilitare un elemento. Ora vi spiego come farlo con poche righe di codice semplice.

Partiamo dalla nostra pagina vuota:

<!DOCTYPE html>
<html lang="it">
  <head>
	<title>prova</title>

  </head>
  <body>

  </body>
</html>

Nel tag head andiamo a inserire la nostra funzione base:

                    <script>
                        function nascondi() {
                                const scompare_01 = document.getElementById("scompare");
                                scompare_01.style.display = "none";
                            }
                        
                    </script>

mentre nel body andiamo a inserire il div da nascondere e il pulsante link per effettuare l’operazione.

	<div id="scompare">Se clicchi il tasto sparisco</div>
	<br />
	<a href="#" onclick="return nascondi();">Clicca qui</a>

Cliccando sul link lanciamo la funzione nascondi che va a rendere invisibile il nostro elemento chiamato scompare. Perché dichiariamo una variabile Const? Perchè questa variabile non sarà possibile assegnarla ad altro. La blocchiamo a questa funzionalità.

Il codice finale sarà:

<!DOCTYPE html>
<html lang="it">
  <head>
	<title>prova</title>
                    <script>
                        function nascondi() {
                                const scompare_01 = document.getElementById("scompare");
                                scompare_01.style.display = "none";
                            }
                        
                    </script>

  </head>
  <body>
	<div id="scompare">Se clicchi il tasto sparisco</div>
	<br />
	<a href="#" onclick="return nascondi();">Clicca qui</a>
  </body>
</html>
Tags: