How to append class to an element in prototype javascript framework?

Question

I have this Prototype code at the top of my page

<script type="text/javascript"> 

    if( window.location == 'http://example.com/about-us.html' ) {

        $('about-us').addClassName('active');
    }

</script>

and this html afer this javascript code

<ul>

            <li id="about-us">
                <a href="#">
                    <span>About Us</span>
                </a>
            </li>

              <li id="something-else">
                <a href="#">
                    <span>Something Else</span>
                </a>
            </li>


  </ul>

But even the address is correct http://example.com/about-us.html the class active is not append at all. I have tried alert and alert is working, so the condition is OK, however addclassname seems to not working.

What am I doing wrong? Thanks in advance.

T.J. Crowder · Accepted Answer · 2011-07-05 21:34:22Z

1

That is how you do it. Be sure the code runs after the element is already on the page. In your case, that means the script block you've quoted has to be after the list you've quoted, like this - live example, because you're not doing anything to delay the code. If you want the script block to be above the list, you can do this:

document.observe("dom:loaded", function() {
    // Your code here
});

Live example ...but you're usually better off just putting your scripts at the bottom of the body element, just before the closing </body> tag, as the YUI folks and others recommend.

If the element does exist at the time your code is running, my guess is that you're looking at the result HTML with "view source" or similar. Runtime changes to the DOM (including adding classes to elements) are not reflected in "view source", which is just a copy of the page as it was delivered from the server. You can use the "DOM" view in the developer tools built into most browsers (or Firebug for Firefox) to see the current state of the DOM tree.

edited Jul 5, 2011 at 21:34

answered Jul 5, 2011 at 21:28

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

marian Over a year ago

Thank you very much. This was basic beginner mistake.

Collectives™ on Stack Overflow

How to append class to an element in prototype javascript framework?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related