JS TypeError: Cannot read property 'style' of null

Question

I have this code that gives me an "typerror" when it's called... could somebody please give me an idea what is wrong, I can't seem to understand what is wrong with it..

document.getElementById('cblberrormsg'+curID).style.display = "block";
var res = ''+ response;
document.getElementById('cblberrormsg'+curID).innerHTML = res;

Thank you.

`document.getElementById('cblberrormsg'+curID)` doesn't exist. Either you have a typo in a script or element's `id`, or you're executing this script before the referred element exists. — Teemu, Apr 04 '14 at 20:18
Yes I understand that, but OTHER "document.getElementById" in the same function ARE working only this one doesn't work... the — Alexandru Vlas, Apr 04 '14 at 20:20
No need for ALL CAPS to get your point across. Next time, include such relevant details in the question. With the tiny bit of JS you provided, we're left with little choice but to guess. — cookie monster, Apr 04 '14 at 20:22

score 0 · Answer 1 · edited May 23 '17 at 12:11

document.getElementById('cblberrormsg'+curID) is returning null. That means that the object with that id does not exist.

The most common reason for this is because you're trying to execute this line of code too early before that part of the page has been parsed and loaded. Your code must either be in a <script> tag that is AFTER the relevant HTML or you must use a function that waits to execute your script until the page is loaded such as this.

But, since in this case, you're constructing an id string using a variable, it also could be that curID isn't what you think it is or has gone beyond the acceptable values in your page.

Once you've made absolutely sure that this code is not being executed until AFTER the page HTML has been loaded, then I'd suggest you instrument it like this:

console.log("curID=" + curID);
console.log("document.getElementById('cblberrormsg'+curID)=" + document.getElementById('cblberrormsg'+curID);
document.getElementById('cblberrormsg'+curID).style.display = "block";
var res = ''+ response;
document.getElementById('cblberrormsg'+curID).innerHTML = res;

Then, look in your debug log when the error occurs and see what the value is for curID when the error occurs.

score 0 · Answer 2 · answered Apr 04 '14 at 20:31

jfriend00 is right, the object you're referring to doesn't exist.

If the document isn't loaded yet OR for some reason you are not properly setting curID, the code you've got will go boom every time.

You can test for this by changing your code up a bit:

var foo = document.getElementById('cblberrormsg'+curID);
if(foo){
    foo.style.display = "block";

    // foo exists 
    // do whatever, yadayadayada
}

JS TypeError: Cannot read property 'style' of null

2 Answers2