DOM Aktualisierung durch Javascript funktioniert nicht

-1

Ich versuche nur eine einfache Funktionalität mit Javascript für Lernzwecke zu prototypieren, aber die Inhalte innerhalb der <p> Tag werden nicht aktualisiert, und ich bin an diesem Punkt fest. Mein Code ist wie folgt:DOM Aktualisierung durch Javascript funktioniert nicht

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

mir jemand sagen könnte, warum die Innerhtml Aktualisierung nicht wahr? Danke im Voraus.

P.S: Der Code holt die Daten aus der XML-Datei, wie ich in der Konsole des Browsers sehen konnte, die Werte an die Variable dispText übergeben.

Quelle

2016-10-07 Parthipan Natkunam

innerHTML- innerHTML- – Laazo

nicht ersetzen resultBox.innerHtml = dispText; byresultBox.innerHTML = dispText; –

@ Azola/Pradyut Manna warum nicht diese als Antworten hinzufügen? –

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

Hope this kann Ihnen helfen,

Quelle

2016-10-07 07:12:29

DOM Aktualisierung durch Javascript funktioniert nicht

Antwort

Verwandte Themen