HTML Academy
Let’s finish our theme switcher
Introduction to JavaScript12/17
Back to the list of tasks
  • 1. Why is JavaScript necessary?
  • 2. Introduction to the theme switcher
  • 3. Find an element using querySelector
  • 4. Output the element to the console.
  • 5. Let’s remove the class using classList.remove
  • 6. Let’s add a class to the element using classList.add
  • 7. Declare a variable
  • 8. Introduction to the event handler
  • 9. Let’s make it so that the theme is switched when the button is clicked
  • 10. Introduction to classList.toggle
  • 11. Let’s finish our theme switcher
  • 12. Introduction to the textContent property
  • 13. Change the textual content for the element
  • 14. Uncomment the code
  • 15. We retrieve data from the input field using input.value
  • 16. Let’s use concatenation
  • 17. Summary of “Introduction to JavaScript”
Change the textual content for the element
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Introduction to the textContent property

Meow! You did a pretty good job on the switcher, but this is a subscription page, after all! Create the subscription page!

Muffin, of course, is a master when it comes to formulating the assignment. But what is he getting at? He can be hard to understand, since he is just a cat. What Muffin actually meant was: after the user fills out and submits a subscription form, a message should appear on the page:

The e-mail address was added to our list of newsletter recipients.

First of all, let’s figure out where users will see this message. The web designer of this page selected the element with the subscription-message class. It currently already has the text: “We promise to send you news no more than once a day, and what is more, we will only send you the most interesting and important news.” When the user submits the form, a message confirming that they have successfully subscribed to the newsletter should appear and replace this text. In other words, we need to find the element, remove the old text from it, and then insert new text. How can we do this using a script? We can do this using the element properties.

Each element has many properties, including size, color, and so on. The textContent property is used to contain the textual content of the element.

Let’s say we have a paragraph:

<p>I am text!</p>

Using textContent we can get the textual content of this paragraph in order to display it in the console, for example:

let paragraph = document.querySelector('p');
console.log(paragraph.textContent);

As a result, the message I am text! appears in the console.

Let’s verify how textContent works. To do this, save the subscription-message element to the variable and output its textual content to the console.

Comments

  • index.html
  • style.css
  • script.js
HTML
<!DOCTYPE html> <html lang="en"> <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="#">Main page</a> <button class="theme-button" type="button">Change the theme</button> </div> </header> <main class="inner-main"> <div class="container"> <h1 class="inner-heading">Subscribe to our newsletter</h1> <p class="subscription-message">We promise to send you news no more than once a day. We will only send you the most interesting and important stories.</p> <form action="https://echo.htmlacademy.ru/courses" method="post" class="subscription"> <div class="subscription-inner"> <label class="subscription-label" for="subscription-email">email</label> <input type="email" class="subscription-email" placeholder="muffin@flashnews.ru" value="" required id="subscription-email"> </div> <button class="button subscription-button" type="submit">Subscribe</button> </form> <section class="news-list list-tiles-view"> <h2 class="news-list-heading">Or continue reading more news stories.</h2> <article class="new-block"> <img src="img/new-graph.jpg" alt="New library"> <div class="new-block-text"> <h3>New graphics library</h3> <p>Now you can create a dashboard in just a matter of seconds.</p> <time datetime="2019-10-16">October 16, 2019</time> </div> </article> <article class="new-block"> <img src="img/new-robot.jpg" alt="What is going on with robots?"> <div class="new-block-text"> <h3>What is going on with robots?</h3> <p>A lot of interesting things are happening in robotics. This could be a piece of news about the latest developments, but that is not what this is.</p> <time datetime="2019-10-15">October 15, 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! portal logo"> </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'); };

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

Click inside the mini browser to put the focus in this window.

100%
Console
Goalscompleted
0
    1. On line 8, declare a variable message and write an element for it with the subscription-message class.
    2. Output the textual content of this element using console.log(message.textContent); on the next line.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.