onclick 함수를 사용하여 배열에 액세스하려고 시도했습니다

Question

배열의 세 개의 요소 배열에 onclick 함수를 적용하려고했지만 배열의 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 속성이 없습니다. ,

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