title: How to get index position of clicked element in javascript
body: <p>I am trying to get the index value of a particular element that is clicked on from a for loop array. What i would like to do is then use this index value and pass it to a variable called indexValue which will then determine a specific div to show. The div it will show will be the one with the same index value that was passed to the variable. I hope this makes sense, I am just not to sure how to achieve this?</p>
  
  <p>The markup would be something like this</p>
  
  <p><strong>HTML</strong>
      
      
      
      </p>
  
  <pre><code>&lt;div class="button"&gt;&lt;/div&gt;
  &lt;div class="button"&gt;&lt;/div&gt;
  &lt;div class="button"&gt;&lt;/div&gt;
  &lt;div class="button"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.test {
     display: none;
  }
  
  .show {
     display: block;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var button = document.querySelectorAll('.button');
  for (var i = 0; i &lt; button.length; i++) {
      button[i].addEventListener('click', function () {
  
      var indexValue: //Get index value from clicked element
      var test = document.querySelectorAll('.test');
  
      test[indexValue].classlist.add('show');
  
    }
  }
  </code></pre>