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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>