title: setAttribute with javascript inside a for evaluation
body: <p>I am trying to set attribute for an element.</p>
  
  <p>the element is pulled from a class (active) and assigned a variable.  The same element is pulled from a different class (topArrow) and assigned a variable.  </p>
  
  <p>When comparing the two variable to run an if statement the evaluate as not the same...???</p>
  
  <p>console.log to see what is going on and I get this:</p>
  
  <pre><code>HTMLCollection[img.active images/a.../top.png]
  HTMLCollection[]
  </code></pre>
  
  <p>where as on an element that does not have a class of topArrow i get this:</p>
  
  <pre><code>HTMLCollection[img.active images/a...left.png]
  HTMLCollection[img.topArrow images/a.../top.png]
  </code></pre>
  
  <hr>
  
  <pre><code>    var arrow = 0;
  
  var topArrow = document.getElementsByClassName("topArrow");
  var menuText = document.getElementsByClassName("menuText");
  var rightArrow = document.getElementsByClassName("rightArrow");
  var bottomArrow = document.getElementsByClassName("bottomArrow");
  var leftArrow = document.getElementsByClassName("leftArrow");
  
  //assign navButtons to var buttons (creates array)
  var buttons = document.getElementsByClassName("navButton");
  
  //for each instance of buttons, assign class "active" onmouseover
  for(var i = 0; i &lt; buttons.length; ++i){
      buttons[i].onmouseover = function() {
          this.className = "active";
          var arrow = document.getElementsByClassName("active");
          console.log(arrow);
          console.log(topArrow);
          changeImages();
      }
  }
  
  //for each instance of buttons, remove class "active" onmouseout
  for(var i = 0; i &lt; buttons.length; ++i){
      buttons[i].onmouseout = function () {
          this.className = "";
      };
  }
  
  function changeImages(){
      if ( arrow == topArrow ) {
          this.setAttribute("src", "images/arrows/top_o.png");
          console.log("arrow should change");
      } else {
          console.log("arrow should not change");
      }
  }
  </code></pre>