Teoría
Teoría

Descomentemos el código

El nuevo texto de la página debe aparecer cuando el usuario se suscriba al boletín. Para ello, necesitamos un manejador de eventos para el envío del formulario. Se puede añadir utilizando la propiedad onsubmit.

let someForm = document.querySelector('.some-form');
someForm.onsubmit = function() {
    console.log('¡Formulario enviado!');
};

Ya hemos encontrado el formulario correcto y añadido un controlador de eventos. Escribieron un poco más de código para que los datos no se envían a ninguna parte todavía. Sólo tiene que descomentar una parte de la secuencia de comandos.

Un comentario es un texto que explica el código. No se muestra en el navegador y no afecta en modo alguno al funcionamiento del programa. Las instrucciones dentro del comentario no se ejecutan, por lo que los comentarios se suelen utilizar si necesitas desactivar temporalmente una parte del código.

Existen dos tipos de comentarios en JavaScript:

// Comentarios de una sola línea.

/*
Y comentarios de varias líneas.
Pueden desactivar varias líneas de código a la vez.
*/

Vamos a descomentar el código y asegurarnos de que el manejador del evento onsubmit funciona. Para ello, dentro de las llaves del manejador, asigne un nuevo valor a message.textContent, y luego intente enviar el formulario haciendo clic en el botón "Suscribirse". Si hacemos todo correctamente, el texto de la página cambiará.

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="ru"> <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íbase a nuestro boletín</h1> <p class="subscription-message">Nos comprometemos a enviarle noticias no más de una vez al día, y sólo las más interesantes e importantes.</p> <form action="https://echo.htmlacademy.ru/courses" method="post" class="subscription"> <div class="subscription-inner"> <label class="subscription-label" for="subscription-email">orreo electrónico</label> <input type="email" class="subscription-email" placeholder="keks@flashnews.es" value="keks@flashnews.es" required="" id="subscription-email"> </div> <button class="button subscription-button" type="submit">Suscríbase</button> </form> <section class="news-list list-tiles-view"> <h2 class="news-list-heading">O lea más noticias</h2> <article class="new-block"> <img src="img/new-graph.jpg" alt=""> <div class="new-block-text"> <h3>Nueva biblioteca para crear gráficos</h3> <p>Ahora puedes crear un cuadro de mando en cuestión de segundos.</p> <time datetime="2019-10-16">16 de octubre de 2019.</time> </div> </article> <article class="new-block"> <img src="img/new-robot.jpg" alt=""> <div class="new-block-text"> <h3>¿Qué pasa con los robots?</h3> <p>Se están haciendo muchas cosas interesantes en robótica, esta noticia podría haber tratado de eso, pero no.</p> <time datetime="2019-10-15">15 de octubre de 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'); form.onsubmit = function(evt) { // La siguiente instrucción cancela el envío de datos evt.preventDefault(); }; */

ObjetivosRealizado

Descomente el código de las líneas 9 a 16 borrando los caracteres /* y */.
Dentro del manejador de eventos, debajo de evt.preventDefault();, asigna message.textContent a '¡Formulario enviado!'
En el mininavegador, haga clic en "Suscríbase" y asegúrese de que la página muestra un mensaje de envío.