Javascript 更改值但内部 onchange 事件侦听器未触发

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>

Answer 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>

Answer 2

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>