HTML Academy
The querySelectorAll Method and Collections
Element collections and properties3/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 handlers to both buttons
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Address the elements in the collection by index

We obtained a collection of two elements and output it to the console. The found elements are buttons, and when we click on each of them a pop-up with a tooltip should appear. To do this, we need to add an event handler to each button in the collection. How can we tell JavaScript that we want to do something with a collection element? We can address this element using an index.

The index is the serial number of the element in the collection. Notice how this number is counted from zero, so the first element has an index of 0 and the second one has an index of 1. Indices are written in square brackets after the collection name:

collection[index]

The way we access elements by index is similar to the way we access variables by name:

let elements = document.querySelectorAll('p');

console.log(elements[0]); // Displays the first element in the collection.
console.log(elements[1]); // Displays the second element in the collection.

Let’s practice: We will first output the first found button to the console and then the second one.

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">Dronovirus</h1> <div class="news-full"> <img src="img/drone.jpg" alt="A small drone"> <div class="news-stats"> <button class="heart" type="button"><span class="likes-number">50</span></button> <time datetime="2019-12-22">December 22, 2019</time> </div> <p>The designers from the <button class="tooltip-button" type="button" data-tooltip-text="That's not a laboratory that inspires confidence">DogDrones.inc</button> laboratory have assured the public that their drones cannot be carriers of dangerous viruses, since their programming did not include this ability. <button class="tooltip-button" type="button" data-tooltip-text="This is not quite accurate – Legal disclaimer">Frankly speaking</button>. In fact, the laboratory's drones cannot communicate any diseases at all.</p> </div> </article> <section class="comment-feed container"> <h2>Comments</h2> <ol class="comment-list"> <li class="user-comment">But what can you tell us about the Muffinfleet drones? This is not advertising.</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 tooltipButton = document.querySelector('.tooltip-button'); let closeButton = document.querySelector('.close-button'); let tooltipButtons = document.querySelectorAll('.tooltip-button'); console.log(tooltipButtons); tooltipButton.onclick = function () { tooltip.classList.add('opened'); }; closeButton.onclick = function () { tooltip.classList.remove('opened'); };
    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. Output just the tooltipButtons[0] element on line 5 instead of the entire collection to the console.
      2. On the next line output the second element in the collection 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.