JavaScript 变量未通过 getElementById() 获取 id 的值

Question

这是 html:

<form>
      <input type="text" id="text1" required>
      <button type="submit" onclick="checkBen()">Add</button>
      <small id="beneficialAlear"></small>
 </form>

还有 JavaScript:

function checkBen(){
            var str = document.getElementById("text1").innerHTML.value;
            if(str != null){
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("beneficialAlear").innerHTML = this.responseText;
                    }
                };

                alert(str);
                xmlhttp.open("GET", "../getFromAJAX.php?q=benUsername&str=" + str, true);
                xmlhttp.send();
            }
        }

即使我输入一些内容，变量str也会变为null，因此永远不会进入ajax。 :( 是代码有问题还是什么问题？任何形式的帮助将不胜感激，谢谢。

Answer 1

您不应该说 document.getElementById("text1").innerHTML.value;，因为该元素没有 innerHTML。您需要 document.getElementById('text1').value。

例如:

function checkBen() {
    var str = document.getElementById("text1").value;
    // ... your code ..., E.G.:
    alert(str);
}

<form>
      <input type="text" id="text1" required>
      <button type="submit" onclick="checkBen()">Add</button>
      <small id="beneficialAlear"></small>
 </form>