JS TypeError：无法读取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.

Answer 1

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.

Answer 2

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
}