0

我制作了一个非常基本且简单的代码，其中我有一个输入字段，该字段在每次按键时都经过验证，但是当我在表单中输入任何内容时，什么都没有发生，当我尝试 chrome 开发人员时，这是错误“无法设置属性'innerHTML'空错误"

我不明白我在做什么错，我知道“document.getElementbyId('show')”返回 null 但为什么呢？请有人帮忙！感谢你

这是我的 index.html 文件

<script type="text/javascript">
var xmlHttp = new XMLHttpRequest();   

function validate(user){               
        xmlHttp.open("GET", "names.php?name="+user, true);             
        xmlHttp.onreadystatechange = function(){
            document.write("error");
            document.getElementById('show').innerHTML = xmlHttp.responseText;
        }
        xmlHttp.send(null);
}


<h2>Enter a name :</h2>
<form>
<input type="text" onkeypress="validate(this.value)" />
<div id="show"></div>
</form>
4

4 回答 4

1

问题是这一行：

document.write("error");

当您document.write()在页面完成加载后使用它会杀死当前页面，因此在下一行没有'show'可以找到的元素。document.getElementById('show')

在我看来，您根本不需要，因为当您尝试在 divdocument.write()中显示时吐出硬编码的“错误”并没有任何意义。xmlHttp.responseText如果您确实需要显示错误，只需以与响应文本相同的方式在该或另一个 div 中显示它。

于 2013-09-12T12:06:45.910 回答
1

不要document.write在页面加载后使用，因为它会替换页面的内容

于 2013-09-12T12:07:09.193 回答
1

这是因为您使用document.write的是覆盖整个页面并因此 'deleting' div#show。

请参阅：为什么 document.write 被认为是“不好的做法”？

于 2013-09-12T12:07:41.850 回答
0

编辑：其他答案是正确document.write的 - 正在替换内容，因此元素不再存在。这个答案的其余部分仍然有效！

大概您只想在请求完成时插入 HTML；为此，请根据 的值进行过滤xmlHttp.readyState；

xmlHttp.onreadystatechange = function(){
    if (xmlHttp.readyState !== 4) { return; }
    document.getElementById('show').innerHTML = xmlHttp.responseText;
};
于 2013-09-12T12:05:26.850 回答