Compito precedente
Familiarità con JavaScript15/16
Torna all'elenco delle attività
  1. 1. Perché avete bisogno di JavaScript?
  2. 2. Familiarizzare con i temi di commutazione
  3. 3. Trovare un elemento usando querySelector
  4. 4. Invia l'elemento alla console
  5. 5. Rimuovere una classe usando classList.remove
  6. 6. Aggiungere una classe usando classList.add
  7. 7. Dichiarare una variabile
  8. 8. Conoscere il gestore di eventi
  9. 9. Per cambiare il tema, fare clic su
  10. 10. Conoscere classList.toggle
  11. 11. Finalizzazione del cambio di tema
  12. 12. Conoscere la proprietà textContent
  13. 13. Modifica del contenuto del testo dell'elemento
  14. 14. Decommentiamo il codice
  15. 15. Ottenere i dati dal campo di input utilizzando input.value
  16. 16. Utilizzo della concatenazione
Compito successivo
  • Corsi
  • Registrazione
  • Accedi

Caricamento...
In pochi secondi sarà pronto.

  • Teoria
  • Teoria

Ottenere i dati dal campo di input utilizzando input.value

Abbiamo imparato a usare uno script per cambiare il testo della pagina quando un utente invia un modulo. Abbiamo bisogno che il testo del messaggio sia come questo:

L'indirizzo e-mail è stato aggiunto alla mailing list.

L'indirizzo e-mail del messaggio deve essere quello inserito dall'utente. Come posso ottenerlo?

Una proprietà speciale dei campi di input, il value, ci aiuterà. Supponiamo che nella pagina sia presente un campo input:

<input type="text">

Il capo stava passando di lì e ha inserito il suo nome: Cupcake. Utilizzando la proprietà value possiamo ottenere i dati da questo campo di input. E poi, ad esempio, inviarli alla console:

let input = document.querySelector('input');
console.log(input.value);
// Stampa: Cupcake

Questi dati possono essere visualizzati direttamente sulla pagina:

let paragraph = document.querySelector('p');
paragraph.textContent = input.value;

Il nostro utente inserisce il suo indirizzo in un campo con la classe subscription-email. Troviamo il campo e diciamo a JavaScript di inviare i dati ricevuti alla pagina.

  • index.html
  • style.css
  • script.js
HTML
<!DOCTYPE html> <html lang="it"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> <title>FlashNews!</title> </head> <body class="page light-theme"> <header class="page-header"> <div class="container"> <a class="header-link" href="#">Casa</a> <button class="theme-button" type="button">Cambia tema</button> </div> </header> <main class="inner-main"> <div class="container"> <h1 class="inner-heading">Iscriviti alla nostra newsletter</h1> <p class="subscription-message">Promettiamo di inviarvi le notizie non più di una volta al giorno, e solo quelle più interessanti e importanti.</p> <form action="" method="post" class="subscription"> <div class="subscription-inner"> <label class="subscription-label" for="subscription-email">email</label> <input type="email" class="subscription-email" placeholder="keks@flashnews.it" value="keks@flashnews.it" required id="subscription-email"> </div> <button class="button subscription-button" type="submit">Abbonarsi</button> </form> <section class="news-list list-tiles-view"> <h2 class="news-list-heading">Oppure leggete altre notizie</h2> <article class="new-block"> <img src="img/new-graph.jpg" alt=""> <div class="new-block-text"> <h3>Nuova libreria per la creazione di grafici</h3> <p>Ora è possibile creare una dashboard in pochi secondi.</p> <time datetime="2019-10-16">16 ottobre 2019.</time> </div> </article> <article class="new-block"> <img src="img/new-robot.jpg" alt=""> <div class="new-block-text"> <h3>Cosa succede ai robot?</h3> <p>Ci sono molte cose interessanti che stanno accadendo nel campo della robotica, questa notizia avrebbe potuto riguardare anche questo, ma no.</p> <time datetime="2019-10-15">15 ottobre 2019.</time> </div> </article> </section> </div> </main> <footer class="page-footer"> <div class="container"> <p>© FlashNews!</p> <a class="footer-logo"> <img src="img/white-logo.svg" alt="FlashNews!"> </a> </div> </footer> <script src="script.js"></script> </body> </html>
CSS
/* Light theme */ .light-theme { color: #333333; background-color: #eae9f2; } .light-theme .page-header { background-color: #ffffff; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); } .light-theme .header-link { color: #6653d9; } .light-theme .header-link::before { background: url("img/arrow-back-light.svg") no-repeat 0 0; } .light-theme .theme-button { color: #6653d9; border: 1px solid #6653d9; } .light-theme .theme-button::before { background-image: url("img/moon-normal.svg"); } .light-theme .theme-button:focus, .light-theme .theme-button:hover { color: #ffffff; background-color: #6653d9; } .light-theme .theme-button:focus::before, .light-theme .theme-button:hover::before { background-image: url("img/moon-hover.svg"); } .light-theme .menu-open { background-color: #ffffff; background-image: url("img/menu-open-light.svg"); } .light-theme .menu-open:focus, .light-theme .menu-open:hover { background-color: #6653d9; background-image: url("img/menu-open-dark.svg"); } .light-theme .menu-close { background-color: #6653d9; } .light-theme .menu-close:focus, .light-theme .menu-close:hover { background-color: #473c8d; } .light-theme .main-menu { background-color: #6653d9; color: #ffffff; } .light-theme .main-menu a:focus, .light-theme .main-menu a:hover { background-color: #473c8d; } .light-theme .news-view button { border: 1px solid #6653d9; color: #6653d9; } .light-theme .news-view button:focus, .light-theme .news-view button:hover, .light-theme .news-view button:active, .light-theme .news-view .view-checked { background-color: #6653d9; color: #ffffff; } .light-theme .news-view .row-view:focus::before, .light-theme .news-view .row-view:hover::before, .light-theme .news-view .row-view:active::before { background-image: url("img/rows-light-checked.svg"); } .light-theme .news-view .tile-view:focus::before, .light-theme .news-view .tile-view:hover::before, .light-theme .news-view .tile-view:active::before { background-image: url("img/tiles-light-checked.svg"); } .light-theme .row-view::before { background-image: url("img/rows-light.svg"); } .light-theme .tile-view::before { background-image: url("img/tiles-light.svg"); } .light-theme .row-view::before { background-image: url("img/rows-light.svg"); } .light-theme .row-view.view-checked::before { background-image: url("img/rows-light-checked.svg"); } .light-theme .tile-view.view-checked::before { background-image: url("img/tiles-light-checked.svg"); } .light-theme .new-block { background-color: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .light-theme .new-block time { color: #aaaaaa; } .light-theme .cookies-agreement { background-color: #fdeacd; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.2); } .light-theme .button { background-color: #6653d9; color: #ffffff; } .light-theme .button:focus, .light-theme .button:hover { background-color: #473c8d; } .light-theme .page-footer { background-color: #6653d9; color: #ffffff; } .light-theme .subscription { background-color: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .light-theme .subscription-message { background-color: #6653d9; color: #eae9f2; } .light-theme .subscription-message::before { background-image: url("img/icon-ok-light.svg"); } .light-theme .subscription-label { color: #6653d9; } .light-theme .subscription-email { border-bottom: 1px solid #6653d9; color: #333333; } /* Dark theme */ .dark-theme { color: #f2f2f2; background-color: #17161a; } .dark-theme .page-header { background-color: #373540; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6); } .dark-theme .header-link { color: #9484f2; } .dark-theme .header-link::before { background: url("img/arrow-back-dark.svg") no-repeat 0 0; } .dark-theme .theme-button { color: #9484f2; border: 1px solid #9484f2; } .dark-theme .theme-button::before { background-image: url("img/sun-normal.svg"); } .dark-theme .theme-button:focus, .dark-theme .theme-button:hover { color: #17161a; background-color: #9484f2; } .dark-theme .theme-button:focus::before, .dark-theme .theme-button:hover::before { background-image: url("img/sun-hover.svg"); } .dark-theme .menu-open { background-color: #373540; background-image: url("img/menu-open-dark.svg"); } .dark-theme .menu-open:focus, .dark-theme .menu-open:hover { background-color: #473c8d; background-image: url("img/menu-open-dark.svg"); } .dark-theme .menu-close { background-color: #473c8d; } .dark-theme .menu-close:focus, .dark-theme .menu-close:hover { background-color: #6653d9; } .dark-theme .main-menu { background-color: #473c8d; color: #f2f2f2; } .dark-theme .main-menu a:focus, .dark-theme .main-menu a:hover { background-color: #6653d9; } .dark-theme .news-view button { border: 1px solid #9484f2; color: #9484f2; } .dark-theme .news-view button:focus, .dark-theme .news-view button:hover, .dark-theme .news-view button:active, .dark-theme .news-view .view-checked { background-color: #9484f2; color: #17161a; } .dark-theme .news-view .row-view:focus::before, .dark-theme .news-view .row-view:hover::before, .dark-theme .news-view .row-view:active::before { background-image: url("img/rows-dark-checked.svg"); } .dark-theme .news-view .tile-view:focus::before, .dark-theme .news-view .tile-view:hover::before, .dark-theme .news-view .tile-view:active::before { background-image: url("img/tiles-dark-checked.svg"); } .dark-theme .row-view::before { background-image: url("img/rows-dark.svg"); } .dark-theme .tile-view::before { background-image: url("img/tiles-dark.svg"); } .dark-theme .row-view.view-checked::before { background-image: url("img/rows-dark-checked.svg"); } .dark-theme .tile-view.view-checked::before { background-image: url("img/tiles-dark-checked.svg"); } .dark-theme .new-block { background-color: #2a2930; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .dark-theme .new-block time { color: #888888; } .dark-theme .cookies-agreement { background-color: #473c8d; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.6); } .dark-theme .button { background-color: #9484f2; color: #17161a; } .dark-theme .button:focus, .dark-theme .button:hover { background-color: #b6aaff; } .dark-theme .page-footer { background-color: #0a0910; color: #f2f2f2; } .dark-theme .subscription { background-color: #2a2930; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .dark-theme .subscription-message { background-color: #9484f2; color: #17161a; } .dark-theme .subscription-message::before { background-image: url("img/icon-ok-dark.svg"); } .dark-theme .subscription-label { color: #9484f2; } .dark-theme .subscription-email { border-bottom: 1px solid #9484f2; color: #f2f2f2; }
JavaScript
let page = document.querySelector('.page'); let themeButton = document.querySelector('.theme-button'); themeButton.onclick = function() { page.classList.toggle('light-theme'); page.classList.toggle('dark-theme'); }; let message = document.querySelector('.subscription-message'); let form = document.querySelector('.subscription'); // Dichiarare la variabile qui form.onsubmit = function(evt) { evt.preventDefault(); // Modificare il valore di textContent nella riga successiva message.textContent = "Form inviato!"; };

Il codice è cambiato, fai clic su "Aggiorna" o attiva l'esecuzione automatica.

Sei passato a un'altra pagina

Fare clic all'interno del mini-browser per evidenziare questa finestra.

100%
Consola
ObiettiviFatto
0
    1. Alla riga 10, dichiarare una variabile email e scriverci dentro un elemento con la classe subscription-email.
    2. Nel gestore dell'evento, modificare il valore di message.textContent da "Form inviato!" a email.value.
    3. Nel mini-browser, fare clic sul pulsante "Abbonarsi" e assicurarsi che nella pagina appaia lo stesso indirizzo inserito nel campo di immissione.

    © 2023-2024, codegym.study