...

View Full Version : Collapsible Div popup error



wuops
07-24-2009, 10: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:

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

Any idea?

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

venegal
07-25-2009, 04: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" :
"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.

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

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

I will use braces with control structures next time.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum