why onchange event doesn't work

Question

Why the onchange event doesn't work? below is my code: The php file is normally now problem. because when i navigate to an other number with de input tag only, it works. But when i navigate with the four buttons it doesn't work. thank you for response!

    <script>
function splus() {
    document.getElementById("scene").value++;
    document.getElementById("take").value="1";
}
function smin() {
    if(document.getElementById('scene').value >1){
    document.getElementById("scene").value--;}
}
function tplus() {
    document.getElementById("take").value++;
    document.getElementById('comment').value = '';
}
function tmin() {
    if(document.getElementById('take').value >1){
    document.getElementById("take").value--;}
}
function change(scene,take) {
     if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("comment").innerHTML = xmlhttp.responseText;
            }
        };

        xmlhttp.open("GET","selectst.php?scene="+scene+"&take="+take,true);
        xmlhttp.send();
}
</script>
<body>
<button onclick="splus()" id="scene+">scene+</button>
<button onclick="smin()" id="scene-">scene-</button>
<button onclick="tplus()" id="take+">take+</button>
<button onclick="tmin()" id="take-">take-</button>
<input id="scene" type="number" onchange="change(this.value,document.getElementById('take').value)" value="1">
<input id="take" type="number" onchange="change(document.getElementById('scene').value,this.value)" value="1">
<textarea id="comment" rows="4" cols="50" placeholder="comments..."></textarea>
</body>

Possible duplicate http://stackoverflow.com/questions/574941/best-way-to-track-onchange-as-you-type-in-input-type-text — Sandeep Nayak, Nov 17 '15 at 14:27

score 0 · Answer 1 · answered Nov 17 '15 at 14:29

This is because change event is fired only if there was an interaction with the element. If you change element's value from javascript, it does not fires it and you will have to fire change event manually. You can refer following [MDN - post]/(https://developer.mozilla.org/en-US/docs/Web/Events/change) for reference

score 0 · Answer 2 · answered Nov 17 '15 at 14:33

Here's a workaround. I am using onfocus().

function splus() {
  document.getElementById("scene").value++;
  document.getElementById("take").value = "1";
  document.getElementById("scene").focus();
}

function smin() {
  if (document.getElementById('scene').value > 1) {
    document.getElementById("scene").value--;
  }
  document.getElementById("scene").focus();
}

function tplus() {
  document.getElementById("take").value++;
  document.getElementById('comment').value = '';
  document.getElementById("take").focus();
}

function tmin() {
  if (document.getElementById('take').value > 1) {
    document.getElementById("take").value--;
  }
  document.getElementById("take").focus();
}

function change(scene, take) {
  alert("Clicked");
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  } else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("comment").innerHTML = xmlhttp.responseText;
    }
  };

  xmlhttp.open("GET", "selectst.php?scene=" + scene + "&take=" + take, true);
  xmlhttp.send();
}

<button onclick="splus()" id="scene+">scene+</button>
<button onclick="smin()" id="scene-">scene-</button>
<button onclick="tplus()" id="take+">take+</button>
<button onclick="tmin()" id="take-">take-</button>
<input id="scene" type="number" onfocus="change(this.value,document.getElementById('take').value)" value="1">
<input id="take" type="number" onfocus="change(document.getElementById('scene').value,this.value)" value="1">
<textarea id="comment" rows="4" cols="50" placeholder="comments..."></textarea>

score 0 · Answer 3 · edited May 23 '17 at 12:15

With this solution : https://stackoverflow.com/a/2856602/5546267

function tplus() {
  document.getElementById("take").value++;
  
  if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    document.getElementById("take").dispatchEvent(evt);
  }
  else
    document.getElementById("take").fireEvent("onchange");
}

<input onchange="alert('change !')" id="take" value="1"><br>
<button onclick="tplus()">run</button>

why onchange event doesn't work

3 Answers3