getStyleClass not working in Firefox

[zxon]

I have a page that has a tickbox list that I want to mimic as a dropdown menu. I have a DIV that looks like the top of a dropdown menu (i've called it "dropdownCATsma ll") and, when it's clicked, it hides itself and shows another one in its place to show the dropdown menu is selected, and the list of tickboxes appears underneath (both called "dropdown_categ ory"). Once clicked again, it returns to its original state, hiding itself and showing the original div again.

I wrote the code to do it like this:

<div class="dropdownCATsmall" onClick="getStyleClass('dropdown_category').style.display = 'block'; getStyleClass('dropdownCATsmall').style.display = 'none';></div>

I've successfully got this working in IE7 but in FireFox (v3), each time I click the div box, the Error Console shows up the message "getStyleClass( "dropdownCATsma ll") is null".

But it isn't null... it's "display:bl ock" by default. What could be the problem?

[acoder]

Where's the code for getStyleClass?

[zxon]

The code for getStyleClass is in a javascript file called main.js which is called to by a generic header file called include-TOPCODE.asp, which in turn is called by the file that I'm trying to use the code in. The code is below:

function getStyleClass (className) {
if (document.all) {
for (var s = 0; s < document.styleS heets.length; s++)
for (var r = 0; r < document.styleS heets[s].rules.length; r++)
if (document.style Sheets[s].rules[r].selectorText == '.' +
className)
return document.styleS heets[s].rules[r];
}
else if (document.getEl ementById) {
for (var s = 0; s < document.styleS heets.length; s++)
for (var r = 0; r < document.styleS heets[s].cssRules.lengt h; r++)
if (document.style Sheets[s].cssRules[r].selectorText == '.' +
className)
return document.styleS heets[s].cssRules[r];
}
return null;
}

It is being called to correctly because the code is being used elsewhere on the page to hide/show options in a search box.

[acoder]

There's inconsistency across browsers with stylesheets. See this article for a better method of deciding whether to use rules/cssRules.

Also, getElementsByCl assName() might be more useful here. If not supported, add a function which mimics the behaviour.

[zxon]

I managed to solve it in the end. I tried to send a reply to this yesterday but the boards were extremely slow.

When I checked the javascript, I found it was looking for one style at a time and yet, because I was using the same piece of CSS x number of times but needed different names for each, I'd done the following to try to remain efficient (this is an example):

.style1, .style2, .style3
{
...
}

In the end, I seperated all of these and the javascript is now working.

Thanks everyone who posted to help me :)

[acoder]

That makes sense. Thanks for posting.

I would say, though, that in this case, it probably would make more sense to use IDs instead of classes for the CSS.