Javascript change value but inside onchange event listener not firing

Question

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>

Does [this](https://stackoverflow.com/a/36084475/3132019) help? — Gerard, Nov 30 '21 at 07:59

webrefer · Accepted Answer · 2021-11-30T08:36:03.977

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>

score 0 · Answer 2 · answered Nov 30 '21 at 08:04

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>

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 — , Nov 30 '21 at 08:11
You could easily add checking if a new word appears before dispatch of an event — aleks korovin, Nov 30 '21 at 08:50

Javascript change value but inside onchange event listener not firing

2 Answers2