嘗試使用onclick函數訪問數組

我試圖將onclick函數應用於包含三個元素的數組，但設置數組的onclick屬性不起作用。任何想法都會非常有幫助。謝謝！嘗試使用onclick函數訪問數組

這裏是我的代碼：

var btnArray = [ 
document.getElementById('buttonOne'), 
document.getElementById('buttonTwo'), 
document.getElementById('buttonThree'), 
]; 
console.log(btnArray); 
btnArray.onclick = function revilImg() { 
console.log('hey'); 
}

來源

2017-04-08 E. Priftis

陣列沒有onclick屬性。您需要迭代在它第一次（我選擇使用Array#forEach），以及處理程序附加到每個DOM元素單獨使用addEventListener：

var buttons = [ 
 
    'buttonOne', 
 
    'buttonTwo', 
 
    'buttonThree' 
 
].map(document.getElementById, document) 
 

 
console.log(buttons) 
 

 
function revealImage() { 
 
    console.log('hey') 
 
} 
 

 
buttons.forEach(function (e) { 
 
    e.addEventListener('click', revealImage) 
 
})

<button id="buttonOne">#1</button> 
 
<button id="buttonTwo">#2</button> 
 
<button id="buttonThree">#3</button>

來源

2017-04-08 23:37:45 gyre

你在哪裏找到，或者知道，當將'document.getElementById'傳遞給map函數時，它需要'document'作爲_thisArg_？ – LGSon

@LGSon'document'只是'Document'的一個實例，所以'getElementById'在'Document.prototype'上定義，而不是'document'的屬性。嘗試運行'document.hasOwnProperty（'getElementById'）'，你會發現它是'false'。 – gyre

啊，明白了，謝謝......再加上1 :) – LGSon

通過陣列添加事件偵聽器，這樣，當你循環，並添加一個處理程序，每個對象

var btnArray = [ 
    document.getElementById('buttonOne'), 
    document.getElementById('buttonTwo'), 
    document.getElementById('buttonThree'), 
]; 

console.log(btnArray); 

for (var i = 0; i < btnArray.length; i++){ 
    btnArray[i].addEventListener('click', function(){ 
    console.log('hey'); 
    }) 
}

如果你的按鈕分享普通級，即mybuttons，可以用querySelecorAll()

var btnArray = document.querySelectorAll('.mybuttons'); 

console.log(btnArray); 

for (var i = 0; i < btnArray.length; i++){ 
    btnArray[i].addEventListener('click', function(){ 
    console.log('hey'); 
    }) 
}

來源

2017-04-08 23:35:41 LGSon

嘗試使用onclick函數訪問數組

回答

相關問題