Cannot read property 'style' of null ... what does that mean?

I’m trying to get rid of some javascript errors related to fadein/fade out. If you go to my test site here findmydentalplan.com/signup.php you will see the green ticks and red warning boxes working fine when entering information, but I get 92 (!) errors when checking the error console.

Chrome:
Uncaught TypeError: Cannot read property ‘style’ of null /templates/default/js/core.js:124

Looking in the core.js file I find this

function hide_info(x){
  //fades out the info
  opacity('infobox_'+x,90,0,1000);
}

function show_info(x){
  //fades in the info
  opacity('infobox_'+x,0,90,100);
}

function opacity(id, opacStart, opacEnd, millisec){
  //sets opacity of an DOM object
  //speed for each frame
  var speed = Math.round(millisec / 100);
  var timer = 0;

  //determine the direction for the blending, if start and end are the same nothing happens
  if(opacStart > opacEnd) {
    for(i = opacStart; i >= opacEnd; i--) {
      setTimeout("change_opacity(" + i + ",'" + id + "')",(timer * speed));
      timer++;
    }
  } else if(opacStart < opacEnd) {
    for(i = opacStart; i <= opacEnd; i++) {
      setTimeout("change_opacity(" + i + ",'" + id + "')",(timer * speed));
      timer++;
    }
  }
}


function change_opacity(opacity, id) {
  //change opacity (cross browsers)
  var object = document.getElementById(id).style;
  object.opacity = (opacity / 100);
  object.MozOpacity = (opacity / 100);
  object.KhtmlOpacity = (opacity / 100);
  object.filter = "alpha(opacity=" + opacity + ")";
}

Line 124 is: var object = document.getElementById(id).style;

I have added some style=“opacity:1; background: white;” properties to my HTML thinking that was the problem, but it makes no difference. Still getting the error related to line 124.

Since my javascript knowledge is minimal and I seem to have a learning-disability for what javascript concerns, I hope some of you more skilled people can tell me what this is about, and what I need to do.

Thanks in advance!

it’s due to “document.getElementById(id)” not being able to be successfully retrieved, because the identified element either doesn’t exist, or it doesn’t exist yet.

The identifier in question is “msgpanel”

I think the msgpanel belongs to something else, I think it’s infobox_ that is related to this problem, isn’t it?

Currently it’s like this:
<div id=“div_req_email” class=“cp_infopanel_off”>
<span>Email</span>:<span class=“red”>*</span>
<input type=“text” id=“req_email” style=“opacity:1; background: white;” name=“req_email”
class=“cp_textbox” onBlur=“do_blur(this.id)” onFocus=“do_focus(this.id)” />
<div id=“infobox_req_email” style=“opacity:1; background: white;” class=“cp_infobox”></div>
</div>

So I tried adding style=“opacity:1;” to the <div id=“infobox_req_email”… element, but no luck there.

As I understand this the function do_blur is called. Then a number of functions are called:
do_blur -> show_green_tick -> show_info -> opacity -> change_opacity -> ERROR

function show_info(x){
opacity(‘infobox_’+x,0,90,100);
}

So the “id” in function change_opacity(opacity, id) would be ‘infobox_req_email’, right? id=“infobox_req_email” is in the html and so is style=…, so where can the problem be?

Google Chrome shows the state variables when the error occurs. The id variable when the error occurs is for msgpanel

Ahh the problem was a completely different place than I was looking. Thank you, with your comments here I found that it was a command that was called “out of the blue” and causing these errors.

Thanks!