javascript - 当第二个输入框从第一个框中填充数据时显示警报

Question

我有这个代码:

<input id="qfront" name="qfront" placeholder="Ketik Nama Kampus ..."
value="" type="text" onKeyPress="strQuery(this.value)"/> *<!--first inputbox-->*
<script>
function strQuery(str) {
     if (str.length == 0) {
         document.getElementById("valdata").value = "";
         return;
     } else {
         var xmlhttp = new XMLHttpRequest();
         xmlhttp.onreadystatechange = function() {
             if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("valdata").value = xmlhttp.responseText;
             }
         }
         xmlhttp.open("POST", "inc.php?q="+str, true);
         xmlhttp.send(null);
     }
}
</script>
<input id="valdata" name="valdata" value="" type="text" onChange="showalert()"/>*<!--2nd inputbox-->*
<script>
function showalert(){
    var X =document.querySelector("#valdata").value;
    alert(X);
}
</script>

当我运行 function strQuery(str) 时，它 100% 工作并在第二个输入框 (#valdata) 中显示结果。当第二个输入框包含数据时(来自第一个输入框)。第二个框不显示警报

我错过了什么吗？我怎样才能做到这一点？ (请不要使用 jquery)。非常感谢

Answer 1

我终于找到了解决问题的方法。我把第二个JS(showalert)的位置固定到第一个，如下:

    <input id="qfront" name="qfront" placeholder="Ketik Nama Kampus ..."
 value="" type="text" onKeyPress="strQuery(this.value)"/>
            <script>
            function strQuery(str) {
                 if (str.length == 0) {
                     document.getElementById("valdata").value = "";
                     return;
                 } else {
                     var xmlhttp = new XMLHttpRequest();
                     xmlhttp.onreadystatechange = function() {
                         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                            document.getElementById("valdata").value = xmlhttp.responseText;
                            showalert()
                         }
                     }
                     xmlhttp.open("POST", "inc.php?q="+str, true);
                     xmlhttp.send(null);
                 }
            }
            function showalert(){
                var X =document.querySelector("#valdata").value;
                alert(X);
            }
            </script>
            <input id="valdata" name="valdata" value="" type="text"/>

非常感谢您的讨论。