Блог

Главная - Вопросы по программированию - Обновление DOM через javascript не работает

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

#javascript #html #ajax #dom #innerhtml

#javascript #HTML #ajax #dom #innerhtml

Вопрос:

Я просто пытаюсь создать прототип простой функциональности, используя 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 amp;amp; 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 не обновляется? Заранее спасибо.

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

Комментарии:

1. innerHTML не innerHTML

2. Замените resultBox.innerHTML = dispText; на resultbox.innerHTML = dispText;

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

4. Большое спасибо @Azola / Pradyut Manna за быстрые ответы. Теперь код работает с предложенными изменениями.

5. @RickViscomi ответ состоит из менее чем 30 символов 🙂

Ответ №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 amp;amp; 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>

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