【问题标题】:DOM updation through javascript not working通过 javascript 更新 DOM 不起作用
【发布时间】: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


【解决方案1】:
 <!DOCTYPE html>    
 <html>     
 <body> 
 <input id="txtSearch" type="text" placeholder="Search" onkeyup="LoadList();" />               
 <p id="results">No data available</p> 
     <script> 
     function LoadList() {   
        var xhttp = new
        XMLHttpRequest();   
        var searchBox = 
        document.getElementById("txtSearch");
        var resultBox =  document.getElementById("results");
        var searchedChars = "";
        searchedChars += searchBox.value;   
        xhttp.onreadystatechange = function() {
         //alert(this.status);
        if (this.readyState == 4 && this.status == 200) {
         var xmlContent = this.responseXML;
                            var nameList = searchedChars;
                            alert(nameList);
                            var dispText = "";
                            for(var i = 0 ; i < nameList.length ; i++)
                            {
                                dispText += nameList[i] + "<br/>";
                            }
                            resultBox.innerHTML = dispText;
        }   
    };   
      xhttp.open("GET", "ajax.txt", true);   
      xhttp.send(); 
     } </script>    
    </body> 
  </html> 

希望对你有帮助

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-01-23
    • 2015-05-29
    • 1970-01-01
    • 2011-10-04
    • 1970-01-01
    • 2014-05-23
    • 2011-12-14
    相关资源
    最近更新 更多