title: javascript for loop with nested if/else statement not executing, not sure what's gone wrong
body: <p>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. </p>
  
  <p>Thanks!</p>
  
  <pre><code>  changeShoe(hypeDocument, element, event){ 
          var currentColor = element.id;
          var colors = document.getElementsByClassName("colors").id;
  
           for (i = 0, n = colors.length; i&lt;n; i++) {
                  if(colors[i] !== currentColor){
                      colors[i].style.opacity = 1;
                      }
                  else{
                      colors[i].style.opacity = .3;
                      }
  
              }
  
      }
  </code></pre>