JavaScript не может идентифицировать элемент в HTML

Question

Мой код JavaScript должен получать данные с использованием AJAX и отображать их в DIV, называемом «txtHint».Однако это ошибка, которую я получаю при выполнении кода (я использую встроенный отладчик в Safari):

TypeError: Результат выражения 'document.getElementById ("txtHint")' [null] не является объектом.

Вот код:

function showItem(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getitem.php?q="+str,true);
xmlhttp.send();
}

Теперь я получаю: TypeError: Результат выражения 'el' [undefined] не является объектом.

Значит ли это, что мой элемент не существует?

Answer 1

Сначала проверьте, существует ли элемент.

var el = document.getElementById('txtHint');
if ( el ) {  
   el.innerHTML = xmlhttp.responseText;
}

Убедитесь, что вы связываете это после того, как элемент был сгенерирован в DOM.Вы также можете дождаться загрузки всего окна через window.onload = showItem.

. Для экономии времени люди используют такие фреймворки, как jQuery.Ваш код приведет к чему-то более лаконичному:

$(function() {
   function blah(str) {
      if ( str == '' ) {
        $('#txtHint').html('')
        return;
      }

      $.ajax({ url:'blah.php', success:function(html) {
        $('#txtHint').html(html);
      } })
   }
});