带有嵌套if / else语句的javascript for循环未执行，不确定出了什么问题

Question

I'm working on this little function for a Hype web animation. Basically, I have between 2 and 8 or so menu items, and when one is clicked, it has to become slightly less opaque and the previous one has to become opaque again. I have a variable that is set to the most recently clicked element id, and another that is set to the class of elements that the menu items are in using getElementIdByClassName. The for loop iterates over the id's in the classes, and an if/else says "if colors[i].id != currentColor set opacity to 1; else set opacity to .3", or at least I think it says that. can anyone lend a hand on this? i can't seem to figure it out.

Thanks!

  changeShoe(hypeDocument, element, event){ 
        var currentColor = element.id;
        var colors = document.getElementsByClassName("colors").id;

         for (i = 0, n = colors.length; i<n; i++) {
                if(colors[i] !== currentColor){
                    colors[i].style.opacity = 1;
                    }
                else{
                    colors[i].style.opacity = .3;
                    }

            }

    }

Answer 1

What is wrong with your code and how to fix.

changeShoe(hypeDocument, element/*, event*/){ //event is not used and can be removed from parameters
    var currentColor = element.id;//This is good
    //var colors = document.getElementsByClassName("colors").id;
    //document.getElementsByClassName("colors") is a HTMLCollection and doesn't have **id** property
    //it means colors is undefined
    var colors = document.getElementsByClassName("colors");// this way

     for (i = 0, n = colors.length; i<n; i++) {//good approach
            //colors is now collection and colors[i] is HTML element. So .id
            //if(colors[i].id !== currentColor){//this is OK IIF each element has unique ID
            if(colors[i] !== element){//not exact match
                colors[i].style.opacity = 1;//now it is correct
                }
            else{
                colors[i].style.opacity = .3;
                }
        }
}

Answer 2

document.getElementsByClassName("colors").id;

Doesn't give you an array.

try

changeShoe(hypeDocument, element, event){ 
    var currentColor = element.id;
    var colors = document.getElementsByClassName("colors");

     for (i = 0, n = colors.length; i<n; i++) {
            if(colors[i].id !== currentColor){
                colors[i].style.opacity = 1;
                }
            else{
                colors[i].style.opacity = .3;
                }
        }
}