HTML Academy
Include the script in another page
Element collections and properties8/17
Back to the list of tasks
  • 1. Check the pop-up tooltips
  • 2. The querySelectorAll Method and Collections
  • 3. Address the elements in the collection by index
  • 4. Add handlers to both buttons
  • 5. Get the value of the data attribute
  • 6. Output the tooltip text to the page
  • 7. Include the script in another page
  • 8. The for of Loop
  • 9. Add the handler using the loop
  • 10. The oninput Event Handler
  • 11. The Length Property, Calculating the String Length
  • 12. Compare the numbers
  • 13. The disabled Property, Locking the Button
  • 14. Add the branch else
  • 15. Reset the character counter to zero
  • 16. Summary of “Element Collections and Properties”
  • 17. Test: Virtual keyboard
Add the handler using the loop
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The for of Loop

We included our script in another news story, where there turned out to be four buttons. We clicked on them, but only the first two worked, since they were the only ones we added event handlers to. How can that be? Do we really have to create a separate script for each news story and copy the handlers? Of course not. Use a loop instead.

A loop is a statement that allows you to execute code several times. There are various types of loops in JavaScript. We will learn about them in future chapters. For our assignment we need the for of loop:

for (of collection variable) {
  // Code that must be executed several times
}

The for of loop will execute the code in the curly braces as many times as there are elements in the collection indicated in parentheses. Each such repetition is called an iteration.

When a loop is created in parentheses, you must also specify a variable. Usually in order to do this, a new variable is declared, and it is used only inside the loop. At each iteration, JavaScript will automatically write the next element in the collection to this variable.

Consider the following example:

let elements = document.querySelectorAll('p'); // Find all paragraphs

for (let element of elements) {  // Create a loop and variable
  console.log(element);          // Output the elements to the console
}

If the elements collection contains two elements, then JavaScript will execute the following instructions:

// First iteration:
// The first element of the collection is automatically written to the variable.
element = elements[0];
// The code from the loop is executed – The first element of the collection is displayed in the console.
console.log (element);

// Second iteration:
// The second element of the collection is automatically written to the variable
element = elements[1];
// The code from the loop is executed again, but now the second element is output to the console.
console.log(element);

The loop is complete when the elements in the collection are finished. After that, JavaScript will proceed to execute the instructions that come after the loop.

Thanks to the loop, we don’t need to know the number of elements in the collection and to copy the handlers in advance. This helps us to make the script universal and the code more concise and understandable.

Test how it works: create a loop and tell JavaScript to output all of the elements in the tooltipButtons collection to the console.

Comments

Files
    <!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"> <span class="header-logo"> <img src="img/main-logo.svg" width="67" height="29" alt="FlashNews! portal logo"> </span> <button class="theme-button" type="button">Change the theme</button> </div> </header> <main class="inner-news"> <div class="tooltip"> <span class="tooltip-text"></span> <button class="button close-button" type="button"><span>Close</span></button> </div> <article class="container"> <h1 class="inner-heading">Augment your reality</h1> <div class="news-full"> <img src="img/ar.jpg" alt="Person wearing virtual reality glasses"> <div class="news-stats"> <button class="heart" type="button"><span class="likes-number">230</span></button> <time datetime="2020-02-18">February 18, 2020</time> </div> <p>The editors of Flashnews! have given their subscribers the following gift: an <button class="tooltip-button" type="button" data-tooltip-text="This is for when you have Pokemons in the living room">augmented reality</button> app in which you can pet an <button class="tooltip-button" type="button" data-tooltip-text="Something in between a pig and a jerboa">aardvark</button>, grow a <button class="tooltip-button" type="button" data-tooltip-text="Beats me what that is, I'll Google it">dragon fruit</button> plant or talk with <button class="tooltip-button" type="button" data-tooltip-text="Only available to annual subscribers">Muffin</button>.</p> </div> </article> <section class="comment-feed container"> <h2>Comments</h2> <ol class="comment-list"> <li class="user-comment">I want that!!!</li> <li class="user-comment">I tried it, and it's awesome!</li> </ol> <form action="https://echo.htmlacademy.ru/courses" method="post" class="comment-form"> <div class="comment-inner"> <label class="comment-label" for="comment-textarea">your comment</label> <textarea class="comment-field comment-area" rows="3" placeholder="Comment" required id="comment-textarea"></textarea> </div> <button class="button submit-button" type="submit">Submit</button> </form> </section> </main> <footer class="page-footer"> <div class="container"> <p>© FlashNews!</p> <span class="footer-logo"> <img src="img/white-logo.svg" alt="FlashNews! portal logo"> </span> </div> </footer> <script src="themes.js"></script> <script src="likes.js"></script> <script src="comments.js"></script> <script src="tooltip.js"></script> </body> </html>
    /* Button text styles */ .tooltip-button { cursor: pointer; position: relative; padding: 1px 8px; border: none; color: inherit; font: inherit; } .tooltip-button::after { position: absolute; content: ""; top: 0; right: 0; width: 0; height: 0; border: 4px solid; border-left-color: transparent; border-bottom-color: transparent; } /* Tooltip styles */ @keyframes tooltip-opener { 0% { transform: translate(50%) scaleX(0); } 100% { transform: translate(100%) scaleX(100%); } } .tooltip { z-index: 2; display: none; flex-direction: row-reverse; position: fixed; max-width: 256px; right: 0; top: 160px; border-radius: 8px 0 0 8px; } .opened { display: flex; animation: tooltip-opener 150ms; } .tooltip-text { display: flex; align-items: center; padding: 10px; } .close-button { min-height: 64px; display: flex; justify-content: center; align-items: center; width: 30px; margin: 0; padding: 0; border-radius: 8px 0 0 8px; } .close-button span { display: inline-block; vertical-align: middle; transform: rotate(-90deg); } /* Comment entry block styles */ .comment-area { height: unset; resize: none; margin-bottom: 10px; padding-top: 4px; padding-bottom: 4px; line-height: 24px; } .text-counter { display: inline-block; vertical-align: baseline; padding: 7px 0; margin-right: auto; } .comment-form.warning .comment-label { color: #f05b29; } .comment-form.warning .comment-area { color: #f05b29; border-color: #f05b29; } .comment-form.warning .comment-area:focus { outline-color: #f05b29; } .comment-form.warning .char-counter { color: #f05b29; font-weight: bold; } .submit-button:disabled { opacity: 0.25; } /* Color schemes */ .light-theme .tooltip { background-color: #ffffff; box-shadow: 0 0 16px rgba(0, 0, 0, 0.5); } .light-theme .tooltip-button { background-color: #f2f2f2; } .light-theme .tooltip-button:focus, .light-theme .tooltip-button:hover { background-color: #6653d9; color: #ffffff; outline-color: #b6aaff; } .tooltip-button:active { opacity: 0.6; } .light-theme .tooltip-button::after { border-right-color: #6653d9; border-top-color: #6653d9; } .dark-theme .tooltip { background-color: #2a2930; box-shadow: 0 0 16px rgba(0, 0, 0, 1); } .dark-theme .tooltip-button { background-color: #0a0910; } .dark-theme .tooltip-button:focus, .dark-theme .tooltip-button:hover { outline-color: #6653d9; background-color: #b6aaff; color: #17161a; } .dark-theme .tooltip-button::after { border-right-color: #b6aaff; border-top-color: #b6aaff; }
    let tooltip = document.querySelector('.tooltip'); let closeButton = document.querySelector('.close-button'); let tooltipButtons = document.querySelectorAll('.tooltip-button'); let tooltipText = document.querySelector('.tooltip-text'); tooltipButtons[0].onclick = function () { tooltipText.textContent = tooltipButtons[0].dataset.tooltipText; tooltip.classList.add('opened'); }; tooltipButtons[1].onclick = function () { tooltipText.textContent = tooltipButtons[1].dataset.tooltipText; tooltip.classList.add('opened'); }; closeButton.onclick = function () { tooltip.classList.remove('opened'); }; // Add a loop here
    let commentForm = document.querySelector('.comment-form'); let commentList = document.querySelector('.comment-list'); let commentField = document.querySelector('.comment-field'); commentForm.onsubmit = function (evt) { evt.preventDefault(); let newComment = document.createElement('li'); newComment.classList.add('user-comment'); newComment.textContent = commentField.value; commentField.value = ''; commentList.append(newComment); };
    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 heart = document.querySelector('.heart'); let likesNumber = document.querySelector('.likes-number'); heart.onclick = function () { if (heart.classList.contains('added')) { likesNumber.textContent--; } else { likesNumber.textContent++; } heart.classList.toggle('added'); };

    What didn’t you like in this task?

    Thanks! We’ll fix everything at once!

    The code has changed, click “Refresh” or turn autorun on.

    You’ve gone to a different page

    Click inside the mini-browser to shift the focus onto this window.

    100%
    Console
    Goalscompleted
    0
      1. On line 20 create a loop for (let tooltipButton of tooltipButtons) { }.
      2. Inside the curly braces of the loop output the variable tooltipButton to the console.
      3. Open the console. Notice how all of the elements in the collection have been output to the console.

      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.