Javascript 更改值但內部 onchange 事件偵聽器未觸發

Question

我寫了一個簡單的腳本來在輸入表單時計算單詞我的問題是為什么在輸入時更改word_count字段的值； word_count的EventListener沒有被觸發

 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

試試這個（結果見控制台）：

 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

您可以在您的輸入上發送一個更改事件。 請查看示例（ 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>