Teoría
Teoría

Obtener el valor del campo con input.value

Ya aprendieron a cambiar con un script el texto de la página cuando alguien envía un formulario. Ahora necesitan que el mensaje diga esto:

La dirección de correo fue agregada a la lista de destinatarios del boletín.

La dirección de correo del mensaje debe ser la misma que escriba la persona usuaria. ¿Cómo la obtenemos?

Para eso nos sirve una propiedad especial que tienen los campos de entrada: value. Supongan que en la página hay un campo input:

<input type="text">

Entonces pasa Cupcake, escribe su nombre en el campo y se va. Con la propiedad value podemos obtener ese dato y, por ejemplo, mostrarlo en la consola:

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

Ese dato también se puede mostrar directamente en la página:

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

En este ejercicio, la persona usuaria escribe su dirección en el campo con la clase subscription-email. Busquen ese campo y hagan que JavaScript muestre en la página el valor que se haya escrito allí.

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="es"> <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="#">Inicio</a> <button class="theme-button" type="button">Cambiar tema</button> </div> </header> <main class="inner-main"> <div class="container"> <h1 class="inner-heading">Suscríbanse a nuestro boletín</h1> <p class="subscription-message">Prometemos enviarles noticias no más de una vez al día, y solo las más interesantes e importantes.</p> <form action="https://echo.codigoheroe.com/courses" method="post" class="subscription"> <div class="subscription-inner"> <label class="subscription-label" for="subscription-email">Correo electrónico</label> <input type="email" class="subscription-email" placeholder="cupcake@flashnews.com" value="cupcake@flashnews.com" required id="subscription-email"> </div> <button class="button subscription-button" type="submit">Suscribirse</button> </form> <section class="news-list list-tiles-view"> <h2 class="news-list-heading">O sigan leyendo más noticias</h2> <article class="new-block"> <img src="img/new-graph.jpg" alt="Nueva biblioteca"> <div class="new-block-text"> <h3>Nueva biblioteca para crear gráficos</h3> <p>Ahora es posible crear un panel en cuestión de segundos.</p> <time datetime="2019-10-16">16 oct 2019</time> </div> </article> <article class="new-block"> <img src="img/new-robot.jpg" alt="¿Qué pasa con los robots?"> <div class="new-block-text"> <h3>¿Qué pasa con los robots?</h3> <p>En la robótica están pasando muchas cosas interesantes; esta noticia podría tratar de eso, pero no.</p> <time datetime="2019-10-15">15 oct 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="Logotipo del portal 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'); // Declaren la variable aquí form.onsubmit = function(evt) { evt.preventDefault(); // Cambien el valor de textContent en la siguiente línea message.textContent = '¡Formulario enviado!'; };

ObjetivosRealizado

En la línea 10, declaren la variable email y guarden en ella el elemento con la clase subscription-email.
Dentro del manejador del evento, cambien el valor de message.textContent de '¡Formulario enviado!' a email.value.
En el mini navegador, hagan clic en el botón «Suscribirse» y comprueben que en la página aparece la misma dirección que está escrita en el campo de entrada.