Interactive online courses HTML Academy
2026-03-09 12:56 Diff
https://htmlacademy.org/courses/javascript-basics/element-collections-properties/length-property

We have already learned about the event handler oninput, and we were able to get data from the input field without submitting the form. The boss wants the comments to be no longer than 142 characters and for users to see how many characters they have already typed in real time. To do this, we need to calculate the length of the comment and display it on the page.

The length property will help us to determine what the comment length is. The value of this property is equal to the number of characters in the string. Characters are more than just letters and numbers. They also include white spaces and line breaks.

let text = 'I love JavaScript'; console.log(text.length); // Displays: 17 let textarea = document.querySelector('textarea'); console.log(textarea.value); // Displays: Muffin console.log(textarea.value.length); // Displays: 6

News site users should be able to see the length of the text that they typed. To display the length of the page, change the text content of the element with the char-counter class. This element is located directly below the input field:

<span class="text-counter"> Used: <span class="char-counter">0</span>//142 characters </span>

The character counter must respond to every change to the input field, so we will change the text content of the element inside our oninput handler. To make sure that the character counter is working, start typing a new comment.