title: How to get index of an array element in click event with JavaScript
body: <p>I'm developing an Electron App, and for this specific part of the code, it's necessary that I recover the index of the current element (on click).</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;input type="checkbox" class="optionBox"&gt; Minimize to tray after 10 seconds
      &lt;input type="checkbox" class="optionBox"&gt; Always check day transition
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>modifierCheckboxes = document.querySelectorAll('.optionBox');
  
  for (var i = 0; i &lt; modifierCheckboxes.length; i++) {
      modifierCheckboxes[i].addEventListener('click', function (e) {
          bindModifierCheckBoxes(e);
      });
  }
  
  function bindModifierCheckBoxes(e) {
      // I need the reference for modifierCheckboxes[i] here 
  }
  </code></pre>
  
  <p>I've tried this:</p>
  
  <pre><code>function bindModifierCheckBoxes(e){
      var t=e.target;
      console.log(Array.prototype.indexOf.call(t.parentNode.childNodes,t));
  }
  </code></pre>
  
  <p>It came "close", but when I click on the first checkbox, I get index of 1, and in the second one I get 3.</p>
  
  <p>Please, no external libraries, just plain JavaScript. </p>