2010-11-13 17 views
0

Mon code JavaScript est censé recevoir des données en utilisant AJAX et l'afficher dans un DIV appelé "txtHint". Cependant, ceci est l'erreur que je reçois lorsque le code est exécuté (je suis en utilisant la construction Débogueur dans Safari):JavaScript ne peut pas identifier l'élément en HTML

TypeError: Result of expression 'document.getElementById("txtHint")' [null] is not an object.

Voici le code:

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(); 
} 

Maintenant je: TypeError : Le résultat de l'expression 'el' [indéfini] n'est pas un objet.

Est-ce que cela signifie que mon élément n'existe pas?

+2

S'il vous plaît poster votre balisage. – jwueller

+1

L'exécutez-vous après le chargement du DOM? Si ce n'est pas le cas, vous essayez de récupérer "txtHint" avant qu'il ne soit accessible et donc getElementById ("txtHint") retournera null. Cela peut fonctionner pour le rappel dans la requête ajax car il est asynchrone, mais si str == "", cela se passe immédiatement –

+0

Comment voir si le DOM n'est pas terminé et que ma div n'a pas encore été 'enregistrée'? – Parker

Répondre

2

D'abord, vérifiez si l'élément existe.

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

Assurez-vous de lier ceci après que l'élément a été généré dans le DOM. Vous pouvez également attendre que la fenêtre entière se charge via window.onload = showItem.

Les gens utilisent des frameworks comme jQuery pour gagner du temps. Votre code se traduirait par quelque chose d'aussi succinct que:

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

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