HTML Academy
The disabled Property, Locking the Button
Element collections and properties14/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
Reset the character counter to zero
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Add the branch else

The assignment the boss gave us is almost finished: users will no longer be able to post comments that are too long. If the text in the input field is longer than 142 characters, the submit button is locked and an error message appears. In this case, the user must correct the comment. Currently the error message does not disappear, and the submit button is not locked even if the text is shortened to the required length. How can we fix this problem?

We need the alternative branch else: if the condition is false, that is, the comment is no longer than 142 characters, then we need to write false to the disabled button property, and we need to remove the warning class from the form.

Add a second branch to our script along with any required instructions and check that now everything works as it should: if the comment is too long, the button is locked and an error message appears. If the character limit is not exceeded, the button is unlocked and the error message disappears.

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">40</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">To understand Kant's philosophy, you must first understand yourself. It might take you some time to achieve this. It often happens that you want to give a person happiness, but instead you bring them a volume of Kant.</textarea> </div> <span class="text-counter"><span class="char-counter">217</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); }; commentField.oninput = function () { charCounter.textContent = commentField.value.length; if (commentField.value.length > 218) { commentForm.classList.add('warning'); submitButton.disabled = true; } // Add else here };
    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 23 add the alternative branch else { }.
      2. Inside the curly braces of the else statement remove the warning class from the commentForm element using the classList.remove method and unlock the submit button.
      3. In the mini-browser type any two additional characters in the comment field. Notice that the counter turns red and the button is locked.
      4. Remove one character from the input field. Notice that the counter and button have returned to their original state.
      5. Click the “Submit” button. Notice that the comment was sent, but the counter under the input field did not reset.

      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.