Question

I really don’t understand why that piece of code won’t work :

$$('.nav_contact').addEvent('click', function(){  
    if (this.getStyle('color') != '#ffc000') {
        this.tween('color','#ffc000');
        alert(this.className);
        $$('.navigation').getElements('a').each(function(a) {
            alert(a.className);
            if (a.className != 'nav_contact') {
                a.tween('color','#b2b1af');
            }
        });
    }
});

here is the related HTML :

<nav class="navigation">
            <ul>
                <li><a class="nav_foo">Portfolio</a></li>
                <li><a class="nav_bar">Services</a></li>
                <li><a class="nav_contact">Contact</a></li>
            </ul>
            </nav>

This is supposed to highlight the clicked button and to somehow hide the other ones. The problem is that I can’t get elements className soon as I enter the each. The alert gives me “undefined”.
Anybody ?

Answer 1

this will be hard to scale / pattern as is.

consider something like this:

(function() {
    var navItems = $$(".navigation a");

    document.getElements("a.nav_contact").addEvent("click", function() {
        var self = this;
        if (this.getStyle('color') != '#ffc000') {
            this.tween('color', '#ffc000');

            navItems.each(function(a) {
                // more scalable - change all but the current one w/o special references.
                if (a != self) {                      
                    a.tween('color', '#b2b1af');
                }

                return;
                // or check if it has an implicit class name...
                if (!a.hasClass("nav_contact"))
                    a.tween('color', '#b2b1af');

                // or check if the only class name is matching...
                if (a.get("class") != 'nav_contact')
                    a.tween('color', '#b2b1af');


            });
        }
    });
})();

jsfiddle: http://jsfiddle.net/dimitar/V26Fk/

To answer your original question though. Even though CURRENTLY mootools returns a proper element object, it will not always be the case. Do not assume it will be and ALWAYS use the api to get properties of the object, eg. element.get("class") vs el.className – it does the browser differences mapping as well. same for value, text etc – just discipline your self to use the API or you wont be able to upgrade to mootools 2.0