通过for循环将事件监听器应用于按钮？

Question

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 for loop, the event listeners aren't added to the button s to function as intended.

I don't see my mistake, and any help would be appreciated.

<button onclick="" id="optContrastButton" data-style="contrast">reset</button>

---

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 < 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;
  });
}

Answer 1

The two modern vanilla JS methods for adding event listeners are the raw assignment:

el.onclick = function() {...} // note the prefix `on`

and using addEventListener:

el.addEventListener('click', function() {...}) // note: no `on` prefix!

You're mixing up the two and using the prefixed version ( onclick ) in addEventListener. So the fix: Change

buttons[b].addEventListener('onclick', function() {

to

buttons[b].addEventListener('click', function() {

Answer 2

Event names don't start with on . You need to listen for the "click" event, not the "onclick" event.