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

我想事件侦听器应用到按钮的数组，如下所示。控制台日志记录工作得很好，但是当我到for循环，事件侦听器不会添加到button S作为旨在发挥作用。通过for循环将事件监听器应用于按钮？

我没有看到我的错误，任何帮助，将不胜感激。

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

来源

2017-03-03 ms_nitrogen

的onclick是空的...不知道是不是故意的。 –

就是这样。我应该删除它吗？ –

不，不，你误会我的问题 –

两个现代香草JS方法添加事件监听器是原始分配：

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

，并使用addEventListener：

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

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

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

到

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

来源

2017-03-04 00:01:07 bowheart

是的，这就是答案！ –

事件名称不on启动。你需要监听"click"事件，而不是"onclick"事件。

来源

2017-03-04 00:01:11 Quentin

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

回答

相关问题