2

I wrote a simple script to count words while typing in form My question is why by changing the value of the word_count field when typing; The EventListener of word_count is not fired

document.getElementById('subject').addEventListener('change', function() {
    var string = this.value
    string = string.replace(/\s+/g, " ");
    var words = string.split(/\s+/).length;
    document.getElementById('word_count').value = words;
}, false);
document.getElementById('subject').addEventListener('keypress', function() {
    var string = this.value
    string = string.replace(/\s+/g, " ");
    var words = string.split(/\s+/).length;
    document.getElementById('word_count').value = words;
}, false);
document.getElementById('word_count').addEventListener('change', function() {
    alert('change fired');
}, false);  
<form>
   <div> <label for="story">string:</label>
      <textarea   id="subject" name="subject"></textarea>
   </div>
   <div>  <label for="story">count:</label>
      <input id="word_count">
   </div>
</form>

Improve this question
1
  • Does this help? Commented Nov 30, 2021 at 7:59

2 Answers 2

Reset to default
1

try this(see console for result):

    var old_count;

document.getElementById('subject').addEventListener('change', function() {
    var string = this.value
    string = string.replace(/\s+/g, " ");
    var words = string.split(/\s+/).length;
    document.getElementById('word_count').value = words;
    if(!old_count)old_count=words
    else{
    if(old_count!=words){
    old_count=words
    document.getElementById('word_count').dispatchEvent(new Event('change'));   
    }
    }

// Dispatch/Trigger/Fire the event
    document.getElementById('word_count').dispatchEvent(new Event('change'));

}, false);
document.getElementById('subject').addEventListener('keypress', function() {
    var string = this.value
    string = string.replace(/\s+/g, " ");
    var words = string.split(/\s+/).length;
    document.getElementById('word_count').value = words;
    if(!old_count)old_count=words
    else{
    if(old_count!=words){
    old_count=words
    document.getElementById('word_count').dispatchEvent(new Event('change'));   
    }
    }

}, false);
document.getElementById('word_count').addEventListener('change', function() {
    console.log('change fired:'+ old_count);
}, false); 
<form>
   <div> <label for="story">string:</label>
      <textarea   id="subject" name="subject"></textarea>
   </div>
   <div>  <label for="story">count:</label>
      <input id="word_count">
   </div>
</form>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

You could dispatch a change event on your input. Please check the example (https://codepen.io/alekskorovin/pen/dyVyepg):

document.getElementById('subject').addEventListener('change', function() {
    var string = this.value
    string = string.replace(/\s+/g, " ");
    var words = string.split(/\s+/).length;
    document.getElementById('word_count').value = words;
}, false);
document.getElementById('subject').addEventListener('keypress', function() {
    var string = this.value
    string = string.replace(/\s+/g, " ");
    var words = string.split(/\s+/).length;
    document.getElementById('word_count').value = words;
    const event = new Event('change'); document.getElementById('word_count').dispatchEvent(event);
}, false);
document.getElementById('word_count').addEventListener('change', function() {
    alert('change fired');
}, false);  
<form>
   <div> <label for="story">string:</label>
      <textarea   id="subject" name="subject"></textarea>
   </div>
   <div>  <label for="story">count:</label>
      <input id="word_count">
   </div>
</form>

Improve this answer

2 Comments

Thank you; but your answer does not help me I want this to fired just with the new word and not with every key pressing
You could easily add checking if a new word appears before dispatch of an event

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.