为什么onchange事件没有'不起作用

why onchange event doesn't work

本文关键字：不起作用 onchange 事件 为什么      更新时间：2023-09-26

为什么onchange事件不起作用？以下是我的代码：php文件现在通常有问题。因为当我导航到另一个只有de-input标记的数字时，它就起作用了。但当我用四个按钮导航时，它就不起作用了。感谢您的回复！

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

这是因为只有在与元素发生交互时才会触发change事件。若您从javascript更改元素的值，它不会触发它，您将不得不手动触发更改事件。您可以参考以下[MDN-post]/(https://developer.mozilla.org/en-US/docs/Web/Events/change)供参考

这里有一个解决方法。我正在使用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>

使用此解决方案：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>

相关文章：