Обновление DOM через javascript не работает

-1

Я просто пытаюсь прототипировать простую функциональность с использованием javascript для обучения, но содержимое в теге <p> не обновляется, и я застрял на этом этапе. Мой код выглядит следующим образом:Обновление DOM через javascript не работает

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title> Ajax Search Box </title> 
 
\t \t <script> 
 
\t \t \t function LoadList() 
 
\t \t \t { 
 
\t \t \t \t var searchBox = document.getElementById("txtSearch"); 
 
\t \t \t \t var resultBox = document.getElementById("results"); 
 
\t \t \t \t var searchedChars = ""; 
 
\t \t \t \t var xHttp = new XMLHttpRequest(); 
 
\t \t \t \t searchedChars += searchBox.value; 
 
\t \t \t \t xHttp.onreadystatechange = function(){ 
 
\t \t \t \t \t if(this.readyState == 4 && this.status == 200) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t var xmlContent = this.responseXML; 
 
\t \t \t \t \t \t var nameList = xmlContent.getElementsByTagName("name"); 
 
\t \t \t \t \t \t var dispText = ""; 
 
\t \t \t \t \t \t for(var i = 0 ; i < nameList.length ; i++) 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t dispText += nameList[i].textContent + "<br/>"; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t resultBox.innerHtml = dispText; 
 
\t \t \t \t \t } 
 
\t \t \t \t }; 
 
\t \t \t \t xHttp.open("GET","AssessorList.xml",true); 
 
\t \t \t \t xHttp.send(); 
 
\t \t \t } 
 
\t \t </script> 
 
\t </head> 
 
\t <body> 
 
\t \t <input id="txtSearch" type="text" placeholder="Search" onkeyup="LoadList();" /> 
 
\t \t <p id="results"> 
 
\t \t \t No Data Available. 
 
\t \t </p> 
 
\t \t 
 
\t </body> 
 
</html>

Может кто-нибудь сказать мне, почему innerHtml не обновляется? Заранее спасибо.

P.S: код извлекает данные из XML-файла, как я мог видеть в консоли браузера, значения передаются в переменную dispText.

источник

2016-10-07 Parthipan Natkunam

innerHTML не innerHtml – Laazo

Заменить resultBox.innerHtml = dispText; byresultBox.innerHTML = dispText; –

@ Azola/Pradyut Manna почему бы не добавить их в качестве ответов? –

<!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>

Надеется, что это может помочь вам

источник

2016-10-07 07:12:29

Обновление DOM через javascript не работает

ответ

Смежные вопросы