HTML Academy
Add the branch else
Element collections and properties15/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
Summary of “Element Collections and Properties”
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Reset the character counter to zero

The tool for checking the new comment now works fine: if the text in the input field is longer than 142 characters, then you will see an error message and the button to submit the comment will be locked. But if you reduce the length of the text, then the lock will be lifted and the error message will disappear. Our problem now is that the character counter will not reset after the comment is submitted.

This happens because the oninput handler is not triggered when we submit the form and clear the input field. To make the comments work as they should, assign the value 0 to the text content of the counter inside another event handler (onsubmit). It already exists in our script. We worked with it before in the previous chapter. The instructions inside this handler are executed when the form is submitted. Therefore, when the user submits a new comment, the counter will be reset to zero. Make sure that this is the case!

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">It can be healthy to go for a walk.</h1> <div class="news-full"> <img src="img/walk.jpg" alt="People go for walks."> <div class="news-stats"> <button class="heart" type="button"><span class="likes-number">51</span></button> <time datetime="2020-02-19">February 19, 2020</time> </div> <p>However, that might not be the case if you don't go for a stroll <button class="tooltip-button" type="button" data-tooltip-text="Or just don't go there">with those people</button>. Scientists from <button class="tooltip-button" type="button" data-tooltip-text="That's a very cool university">Harvard</button> have found that relationships with loved ones affect happiness more than intelligence, salary, or your number of <button class="tooltip-button" type="button" data-tooltip-text="Did YOU sign up for the newsletter?">followers</button>. It still remains <button class="tooltip-button" type="button" data-tooltip-text="More money is needed">unclear</button> how the number of <button class="tooltip-button" type="button" data-tooltip-text="The superior lifeform">kitties</button> affects your level of happiness.</p> </div> </article> <section class="comment-feed container"> <h2>Comments</h2> <ol class="comment-list"> <li class="user-comment">From the point of view of banal erudition, every individual whose cynical thinking creates associations with concepts of paradoxical illusions simply cannot but ignore the criteria of utopian subjectivity. And from the point of view of the value or content of this logical statement, it is determined by means of a purely negative predicate whether it adds anything to the entire body of knowledge. <br> Immanuel Kant <br> Do you think that you understand human nature better than Kant?</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> <span class="text-counter"><span class="char-counter">0</span>/218 characters used</span> <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'); closeButton.onclick = function () { tooltip.classList.remove('opened'); }; for (let tooltipButton of tooltipButtons) { tooltipButton.onclick = function () { tooltipText.textContent = tooltipButton.dataset.tooltipText; tooltip.classList.add('opened'); }; }
    let commentForm = document.querySelector('.comment-form'); let commentList = document.querySelector('.comment-list'); let commentField = document.querySelector('.comment-field'); let charCounter = document.querySelector('.char-counter'); let submitButton = document.querySelector('.submit-button'); 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); // Add your code here }; commentField.oninput = function () { charCounter.textContent = commentField.value.length; if (commentField.value.length > 218) { commentForm.classList.add('warning'); submitButton.disabled = true; } else { commentForm.classList.remove('warning'); submitButton.disabled = false; } };
    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. Inside the onsubmit event handler, assign the value 0 to charCounter.textContent.
      2. In the mini-browser, type any text in the input field, though make sure to type at least three characters.
      3. Click the “Submit” button. Notice how the counter resets to zero after the comment is added.

      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.