What's wrong with my Javascript?

Greetings all,

I'm tying to use the following function to control the visibility of groups of submenus -

function toggleSubMenu(submenu) {
if(submenu.className='sub_menu_off') {
submenu.className='sub_menu_on'
} else {
submenu.className='sub_menu_off'
}
}

The function is triggered onClick of a level 1 menu title, to show or hide the appropriate sub menu. The only difference between the two classes is that one has 'display' set to 'block' and the other to 'none'.

The weird thing is that the sub menus open correctly, they just won't close again. I've looked around for examples, some of which match this, and can't see why the if...else structure doesn't work.

Any ideas?

Thanks,

Ben

I think it's best when you post the complete javascript or the url to it in here, it might be in other parts of the script.

Robert Jansen

BarossaBenjamin wrote:
:: Greetings all,
::
:: I'm tying to use the following function to control the visibility of
:: groups of submenus -

The following line is wrong:

:: if(submenu.className='sub_menu_off') {

It should be

if(submenu.className=='sub_menu_off') {

You need two equals signs, not one. A single equals sign assigns the value
on the right to the variable on the left. A pair of equals signs (the
'equality operator') tests to see whether the value on the right is the same
as already held by the variable on the left. Subtle, but important
difference that catches many newcomers out.

Although there is nothing wrong with using class names that include the
underscore, not all browsers support them. You may be better renaming your
classes subMenuOff, subMenuOn. Remember, though, that class names and IDs in
JavaScript and CSS are case-sensitive, so you must always use the same
mixture of upper and lower case. Do not be tempted to use hyphens as an
alternative. They will cause the JavaScript to fail.

--
David Powers
*******************************************
No-nonsense reviews of computer books
http://japan-interface.co.uk/webdesign/books.html
Save 10% on TopStyle CSS Editor
*******************************************

Thanks David,

I've tried the modifications you suggested, but to no avail. I updated the function to use the equality operator, and removed all the underscores from my class names, but it doesn't seem to make any difference.

I've modified the function a bit:

function toggleSubMenu(submenu) {
if(submenu.className=='submenuoff') {
openMenu(submenu)
} else {
closeMenu(submenu)
}
}
function openMenu(submenu) {
submenu.className='submenuon'
}
function closeMenu(submenu) {
submenu.className='submenuoff'
}

....basically just to test whether I'm going about the swap the right way. If I call OpenMenu or CloseMenu directly (onMouseOver for example) the menu works exactly as expected.

When I call toggleSubMenu onClick, the menu will expand as expected. Then when I click a second time, nothing happens - no error, just nothing. Does this mean that the if...else is not right?

I've tried adding a second 'if' after the else, just to be sure, but no joy. I've also tried using the submenu's ID and referencing with getElementById in the functions, no good either...

Any ideas? I'm trying to put together an URL I can point you to, but I haven't got an app server to run the dynamic stuff live yet... This is starting to bug me!

Thanks for your help - much appreciated.

Ben

BarossaBenjamin wrote:
:: Thanks David,
::
:: I've tried the modifications you suggested, but to no avail. I
:: updated the function to use the equality operator, and removed all
:: the underscores from my class names, but it doesn't seem to make any
:: difference.
::
:: I've modified the function a bit:

There's nothing wrong with your functions. I've just tested them out on a
very simple page. I suspect the problem lies with the way your calling them.
Put this in the tag of the element you want to toggle:

onclick="toggleSubMenu(this)"

For example:

<div class="submenuon" onclick="toggleSubMenu(this)">

By using the keyword "this", the event should be correctly triggered.

--
David Powers
*******************************************
No-nonsense reviews of computer books
http://japan-interface.co.uk/webdesign/books.html
Save 10% on TopStyle CSS Editor
*******************************************