Using JS to change an elements class via its id

programming web dev
1

*EDIT I’m an idiot, and forgot that I made this script to only work in IE, and was testing it in Firefox… Awesome. If a mod wants to delete this thread, feel free. ****

Hey, I’m trying to put together a dropdown nav, but I’m not the best with javascript… You can see what I’ve got so far here.

Basically, it’s a simple horizontal dropdown nav, with submenus that appear on rollover. I’ve got that part basically down, but I also am trying to add another feature - I want the current sections sub-menu to always be visible unless another section is rolled over, in which case only that section’s sub-menu will be visible.

In my markup, the section’s sub-menu that is to be visible is designated with the class “over”, and the current section is designated with the id “over”… Hopefully that makes sense.

My js is just a script that changes the class name of <li> elements based on rollover, so my CSS can handle the display stuff (FYI the “alerts” are just for my testing purposes):

startList = function() {
        if (document.all&&document.getElementById) {
            navRoot = document.getElementById("nav");
            currentPage = document.getElementById("over");
            for (i=0; i<navRoot.childNodes.length; i++) {
                node = navRoot.childNodes*;
                if (node.nodeName=="LI") {
                    node.onmouseover=function() {
                        document.getElementById('over').className = "";
                        alert("Classname="+document.getElementById('over').className);
                        this.className+=" over";
                    }
                    node.onmouseout=function() {
                        this.className=this.className.replace(" over", "");
                        document.getElementById('over').className = "over";
                        alert("Classname="+document.getElementById('over').className);
                    }
                }
            }
        }
    }
    window.onload=startList;

And my markup is:

<ul id="nav">
                <li id="over" class="over"><a class="menuItem" id="neighbors" href=""></a>
                    <ul>
                        <li><a href="">history</a></li>
                        <li><a href="">stories</a></li>
                        <li><a href="">photo album</a></li>
                        <li><a href="">donation</a></li>
                    </ul>
                </li>
                <li><a class="menuItem" id="renovation" href=""></a>
                    <ul>
                        <li><a href="">timeline</a></li>
                        <li><a href="">team</a></li>
                    </ul>
                </li>
                <li><a class="menuItem" id="tour" href=""></a></li>
                <li><a class="menuItem" id="community" href=""></a></li>
                <li><a class="menuItem" id="purchase" href=""></a></li>
                <li><a class="menuItem" id="contact" href=""></a></li>
            </ul>