通過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循環將事件監聽器應用於按鈕？

回答

相關問題