title: selecting anchor elements with specific class
body: <p>I want to select the menu-enabled anchor with javascript, which is a small image and when I click it it should change a class of the background to highlight the menu. 
  The change class works, I tried document.onclick and it works, but when I try to be specific wrapper>nav> a.menu-enabled it doesn't select it.
  I've tried:</p>
  
  <pre><code>var menu = document.getElementById('nav'); 
  var anchor = menu.getElementsByTagName('a');
  </code></pre>
  
  <p>to be able to click on every link just to test, but it didn't work.</p>
  
  <p>I've tried: </p>
  
  <pre><code>var anchor = menu.getElementsByClassName('menu-enabled');
  </code></pre>
  
  <p>and then </p>
  
  <pre><code>anchor.onclick...` but still no result :(
  </code></pre>
  
  <p>tried using jquery<br>
     <code>$("a.menu-enabled").onclick = function()</code> 
  but still no result</p>
  
  <p>Currently is set to click anywhere on the document until I get it done. </p>
  
  <pre><code>    &lt;script&gt;
      document.onclick = function() {
      $(".overlay").toggleClass("overlay-show");
      } 
      &lt;/script&gt;
  
  
  &lt;div id="wrapper"&gt;
          &lt;div class="logo"&gt;
                  &lt;a href="index.html"&gt;Tro&lt;/a&gt;
              &lt;/div&gt;
          &lt;nav id="nav" class="menu-icon"&gt;
                  &lt;a class="menu-enabled"&gt;&amp;nbsp;&lt;/a&gt;
                  &lt;a class="link-enabled" target="_blank"&gt;&amp;nbsp;&lt;/a&gt;
                  &lt;a class="prev-disabled"&gt;&amp;nbsp;&lt;/a&gt;
                  &lt;a class="next-disabled"&gt;&amp;nbsp;&lt;/a&gt;
                  &lt;a class="back-disabled"&gt;&amp;nbsp;&lt;/a&gt;
              &lt;/nav&gt;
              &lt;div class="overlay"&gt;
          &lt;nav class="meniu"&gt;
                  &lt;a href="#1"&gt;Link 1&lt;/a&gt;
                  &lt;a href="#2"&gt;Link 2&lt;/a&gt;
                  &lt;a href="#3"&gt;Link 3/a&gt;
                  &lt;a href="#4"&gt;Link 4&lt;/a&gt;
              &lt;/nav&gt;
  </code></pre>
  
  <p>Edit 1: fiddle <a href="http://jsfiddle.net/bFXZj/" rel="nofollow noreferrer">http://jsfiddle.net/bFXZj/</a></p>
  
  <p>Edit 2: Ok, I think the problem is I could not click the button, tried it on something else and it worked, I thinkg the z-index is the problem, gonna return with an answer soon.</p>
  
  <p>Edit 3: it could be because I gave the anchor a background? </p>
  
  <pre class="lang-css prettyprint-override"><code>nav.menu-icon a.menu-enabled{
      background: url(http://www.xxx.xx/menu.png) no-repeat 0 0;
      background-size: 24px 24px;
      -webkit-transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      opacity: 1;
      visibility: visible;
      z-index: 99;
  }
  </code></pre>