onclick関数を使用して配列にアクセスしよう

Question

onclick関数を3つの要素の配列に適用しようとしていますが、配列のonclickプロパティを設定しても機能しません。どんなアイデアも本当に役に立ちます。 ありがとう！ここで

は私のコードです：

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

Answer 1

配列にはonclickプロパティがありません。あなたは（私はArray#forEachを使用することを選択した）最初、その上反復する必要があり、addEventListenerを使用して、個別に各DOM要素にハンドラをアタッチ：

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>

Answer 2

は、配列を、このようなイベントリスナー、あなたのループを追加し、ボタンが共有している場合、各オブジェクト

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