Leggere quello che l'utente scrive

In parole semplici

Un campo input contiene testo scritto dall’utente. Con .value puoi leggere quel testo e usarlo nel tuo codice.

Questa lezione fa parte del modulo Rendere interattiva una pagina. L’obiettivo del modulo è: Collegare JavaScript a HTML in modo graduale: selezionare elementi, reagire a eventi, leggere form e salvare dati.

Parole nuove

• input: campo in cui l’utente scrive.
• value: valore attuale di un campo.

Cosa impari

• Capire il concetto senza partire da definizioni astratte.
• Vedere un esempio piccolo che puoi copiare e modificare.
• Collegare l’argomento al risultato del modulo: una todo list semplice che salva le attività nel browser.

Esempio da copiare

<input id="nome" placeholder="Scrivi il tuo nome">
<button id="saluta">Saluta</button>
<p id="output"></p>

<script>
  const nome = document.querySelector("#nome");
  const output = document.querySelector("#output");
  const saluta = document.querySelector("#saluta");

  saluta.addEventListener("click", () => {
    output.textContent = "Ciao " + nome.value;
  });
</script>

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizio guidato

1. Crea input, bottone e paragrafo.
2. Leggi il valore dell’input al clic.
3. Mostra un saluto nel paragrafo.
4. Prova con nomi diversi.
5. Prova anche con campo vuoto.

Controllo finale

Hai finito quando il messaggio usa davvero il testo scritto nel campo.