SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Location
    Denmark
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Code:
    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    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"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Location
    Denmark
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Google Chrome shows the state variables when the error occurs. The id variable when the error occurs is for msgpanel
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Location
    Denmark
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •