【发布时间】:2017-02-16 01:31:42
【问题描述】:
我只是为了学习目的而尝试使用 javascript 制作一个简单功能的原型,但 <p> 标记中的内容没有更新,我被困在这一点上。我的代码如下:
<!DOCTYPE html>
<html>
<head>
<title> Ajax Search Box </title>
<script>
function LoadList()
{
var searchBox = document.getElementById("txtSearch");
var resultBox = document.getElementById("results");
var searchedChars = "";
var xHttp = new XMLHttpRequest();
searchedChars += searchBox.value;
xHttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200)
{
var xmlContent = this.responseXML;
var nameList = xmlContent.getElementsByTagName("name");
var dispText = "";
for(var i = 0 ; i < nameList.length ; i++)
{
dispText += nameList[i].textContent + "<br/>";
}
resultBox.innerHtml = dispText;
}
};
xHttp.open("GET","AssessorList.xml",true);
xHttp.send();
}
</script>
</head>
<body>
<input id="txtSearch" type="text" placeholder="Search" onkeyup="LoadList();" />
<p id="results">
No Data Available.
</p>
</body>
</html>
谁能告诉我为什么 innerHtml 没有更新?提前致谢。
P.S:代码正在从 xml 文件中获取数据,正如我在浏览器控制台中看到的那样,这些值被传递给 dispText 变量。
【问题讨论】:
-
innerHTML 不是 innerHtml
-
替换 resultBox.innerHtml = dispText; byresultBox.innerHTML = dispText;
-
@Azola/Pradyut Manna 为什么不添加这些作为答案?
-
非常感谢@Azola/Pradyut Manna 的快速回复。代码现在可以工作了,建议的更改。
-
@RickViscomi 答案少于 30 个字符 :)
标签: javascript html ajax dom innerhtml