Question

我正在尝试将事件侦听器应用于按钮数组，如下所示。控制台日志记录工作正常，但是当我进入for循环时，事件侦听器不会添加到button以按预期运行。

我没有看到我的错误，任何帮助都会受到赞赏。

<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

用于添加事件侦听器的两个现代vanilla JS方法是原始赋值：

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

并使用addEventListener：

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

你在addEventListener中混合了两者并使用了前缀版本（onclick）。所以修复：改变

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

到

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

Answer 2

事件名称不以on开头。您需要收听"click"事件，而不是"onclick"事件。

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

2 个答案: