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

JavaScript
1

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!

2

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”

3

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?

4

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

5

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!