View Full Version : Collapsible Div popup error

07-24-2009, 11:34 PM
I modified a little a script from dynamicdrive.com (Animated Collapsible DIV v2.01 (http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm)). 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:


Any idea?

Old Pedant
07-25-2009, 05:05 AM
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.

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
? "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
? "http://cineout.es/wp-content/themes/infimum/imgs/collapse.jpg"
: "http://cineout.es/wp-content/themes/infimum/imgs/expand.jpg"
? "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.

07-25-2009, 05:07 AM
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:

if (/peli/.test(divobj.id))
document.getElementById(divobj.id+"-toggle").src=(state=="block")? "http://cineout.es/wp-content/themes/infimum/imgs/collapse.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.

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

07-25-2009, 08:41 AM
Thank you guys!

I will use braces with control structures next time.