title: Apply Event Listeners to buttons via for loop?
body: <p>I am trying to apply event listeners to an array of buttons, as depicted below.  The console logging works just fine, but when I get to the <code>for</code> loop, the event listeners aren't added to the <code>button</code>s to function as intended.  </p>
  
  <p>I don't see my mistake, and any help would be appreciated.</p>
  
  <pre><code>&lt;button onclick="" id="optContrastButton" data-style="contrast"&gt;reset&lt;/button&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
  };
  
  let buttons = document.getElementById('optWindow').getElementsByTagName('button');
  console.log(buttons);
  for(let b = 0; b &lt; buttons.length; b++) {
    let data = buttons[b].dataset.style;
    console.log(data); // Data returned 'contrast' :: OKAY
    buttons[b].addEventListener('onclick', function() {
      document.querySelector('#innerWindow').style.webkitFilter = `${data}(1)`;
      let c = data.capitalize();
      console.log(`#opt${c}Range`); // No Data returned :: FAIL :(
      document.querySelector(`#opt${c}Range`).value = 1;
    });
  }
  </code></pre>