Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Collapsible Div popup error

    I modified a little a script from dynamicdrive.com (Animated Collapsible DIV v2.01). It works well, but something is wrong. When you click on the button image a javascript error popup appears:

    An error exists inside your "ontoggle" function:
    TypeError: document.getElementById(divobj.id + "_info-toggle") is null
    Aborting execution of function.

    You can see it in:

    http://cineout.es/div_test/divs_test2.html

    Any idea?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,636 Times in 4,598 Posts
    This is the danger you always face when you sloppily omit {....} in if( ) conditions.

    You NEEDED a pair of {...} here. But I uncovered another bug and fixed it, too.
    Code:
    animatedcollapse.ontoggle=function($, divobj, state)
    {
          if (divobj == null || divobj.id == null ) { return; } // ADDED TEST, NEEDED!
          if (/trailer/.test(divobj.id))
          {
                // the braces here aren't needed but are a good idea
                document.getElementById(divobj.id+"-toggle").src=(state=="block")
                   ? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_trailer.jpg" 
                   : "http://cineout.es/wp-content/themes/infimum/imgs/expand_trailer.jpg"
          }
          if (/peli/.test(divobj.id))
          {
                // the braces here *ARE* needed
                document.getElementById(divobj.id+"-toggle").src=(state=="block")
                   ? "http://cineout.es/wp-content/themes/infimum/imgs/collapse.jpg" 
                   : "http://cineout.es/wp-content/themes/infimum/imgs/expand.jpg"
                document.getElementById(divobj.id+"_info-toggle").src=(state=="block")
                   ? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_info.jpg" 
                   : "http://cineout.es/wp-content/themes/infimum/imgs/expand_info.jpg"
          }
    }
    Try to *ALWAYS* use braces with control structures, so you are aware of where the limits are.

  • Users who have thanked Old Pedant for this post:

    wuops (07-25-2009)

  • #3
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Easy, it's null because the DOM element does not exist.

    Now let's look for the error:

    Which DOM element has been requested when the error occured?
    Answer: the one with an id of "trailer1_info-toggle". Doesn't exist. Check.

    Why has it been requested in the first place?
    Have a look here:
    Code:
    if (/peli/.test(divobj.id))
    		document.getElementById(divobj.id+"-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse.jpg" : 
    "http://cineout.es/wp-content/themes/infimum/imgs/expand.jpg"
    		document.getElementById(divobj.id+"_info-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse_info.jpg" : "http://cineout.es/wp-content/themes/infimum/imgs/expand_info.jpg"
    It shouldn't have tested positive for /peli/, right?
    Answer: It didn't. Your indentation suggest braces where there are none.

    Edit: Darn you, Old Pedant! I should have just given the answer instead of writing up that fun little quiz.

  • #4
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you guys!

    I will use braces with control structures next time.


  •  

    Posting Permissions

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