title: Trigger "onchange" event
body: <p>The "onchange" event is triggered only when the USER enters some value. Why isn't possible to fire the event when I change the value automatically via Javascript ? Is there an alternative ?</p>
  
  <p><strong>Animation:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/vqCom.gif" alt="enter image description here"></p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;script&gt;
              document.addEventListener ("DOMContentLoaded", function () {
                  var input = this.getElementsByTagName ("input")[0];
                  var div = this.getElementsByTagName ("div")[0];
                  var i = 0;
                  var seconds = 5;
  
                  div.innerHTML = "The following input should fire the event in " + seconds + " seconds";
  
                  var interval = window.setInterval (function () {
                      i ++;
  
                      if (i === seconds) {
                          window.clearInterval (interval);
  
                          input.value = "Another example";
  
                          div.innerHTML = "Nothing ! Now try change the value manually";
                      }
                      else {
                          div.innerHTML = "The following input should fire the event in " + (seconds - i) + " seconds";
                      }
                  }, 1000);
  
                  input.addEventListener ("change", function () {
                      alert ("It works !");
                  }, false);
              }, false);
          &lt;/script&gt;
  
          &lt;style&gt;
              body {
                  padding: 10px;
              }
  
              div {
                  font-weight: bold;
                  margin-bottom: 10px;
              }
  
              input {
                  border: 1px solid black;
                  border-radius: 3px;
                  padding: 3px;
              }
          &lt;/style&gt;
  
          &lt;title&gt;Event&lt;/title&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;input type = "text" value = "Example" /&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks</p>