Uncaught TypeError: Cannot set property 'innerHTML' of null

Question

Working with Ajax... I cannot seem to figure out what is wrong here. The error occurs on the code: objUserID.innerHTML = username;. It thinks the variable username is null. username does have data in it because the following code confirms it: console.log("user: ["+username+"]"); Can anyone figure this out?

function actionBid(bidID,bidA,bidAction){
   var XMLHttpRequestObject = false;

   if (window.XMLHttpRequest)
   {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      XMLHttpRequestObject = new XMLHttpRequest();
   }
   else if (window.ActiveXObject) 
   {
      // code for IE6, IE5
      XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
   }
   if(XMLHttpRequestObject)
   { 
      // ==== GET BID ====
      if (bidAction == "getbid"){

      var objUserID = document.getElementById("curBidUser"+bidID); 
      var res = XMLHttpRequestObject.responseText;
      var username = res.substring(0,res.indexOf(','));
      console.log("user: ["+username+"]");
      objUserID.innerHTML = username;
      }
   }
}

Solution 1

It thinks the variable username is null

False. It is telling you that it cannot access the property innerHTML of null. In other words, that objUserID is null and that you cannot access a property of it.

Put another way, your element does not exist.

Solution 2

If you are having this problem, it might be because you have placed your script tag at the top of the body tag before everything else. You want to place your script tag at the bottom of the body tag.

Solution 3

Actually it was an loading issue check with the follow code.

setTimeout(function(){ 
  xYzFunction();    
}, 3000 )