The text below is selected, press Ctrl+C to copy to your clipboard. (⌘+C on Mac) No line numbers will be copied.
Guest
Javascript dynamic word count update when text changes in a textbox - using event listener
By Guest on 9th December 2022 09:25:38 PM | Syntax: JAVASCRIPT | Views: 159



New Paste New paste | Download Paste Download | Toggle Line Numbers Show/Hide line no. | Copy Paste Copy text to clipboard
  1. Here is a sample JavaScript code that you can use to display the word count of a text in a div element, and to update the word count dynamically when the text in the textbox changes:
  2.  
  3.  
  4. // Get the div element
  5. var div = document.getElementById("wordcount");
  6.  
  7. // Get the textbox element
  8. var textbox = document.getElementById("textbox");
  9.  
  10. // Create an event listener that will update the word count when the text in the textbox changes
  11. textbox.addEventListener("input", function() {
  12.   // Get the word count of the text in the textbox
  13.   var wordCount = textbox.value.split(" ").length;
  14.  
  15.   // Display the word count in the div
  16.   div.innerHTML = "Word Count: " + wordCount;
  17. });
  18.  
  19.  
  20. In this code, the textbox element is assigned an input event listener, which will be called every time the text in the textbox changes. When the event listener is called, the word count of the text in the textbox is calculated, and it is displayed in the div element by setting the innerHTML property of the div element to the word count.
  21.  
  22. You can customize this code to suit your specific needs, such as changing the text that is displayed in the div element, or using a different element to display the word count.














  • Recent Pastes