[JavaScript] 클릭한 요소 인덱스 구하기 (querySelectorAll, onclick...)

querySelectorAll을 쓰면서 가끔 겪는 문제가 있다.

선택한 요소 중 특정 요소만 효과를 주고 싶은데,

그러면 그 요소의 인덱스를 알아야 한다는 것!

 

그래서 구글링을 해보다가 할 수 있는 방법을 찾았긴 찾았다.

이게 과연 성능 등을 고려해도 좋은지는 모르겠지만....!

그래도 오늘의 성과이니 기록해두려고 한다.

 

아래의 예제는 모든 button 요소들을 저장한 buttons 에서, 내가 클릭한 인덱스(buttons[n])의 요소가 가지고 있는 textContent를 alert 창으로 띄우는 기능이다.

const buttons=document.querySelectorAll('button');
for(let i=0;i<buttons.length;i++){
    (function(idx){
        buttons[idx].onclick=()=>{
            alert(buttons[idx].textContent);
        }
    })(i);
}

자바스크립트를 배워가는 과정이라서...

for문을 써서 click이 된 요소를 찾고 즉시실행함수를 통해 기능하게 하는 것이 과연 좋은지 모르겠다! 

아님 상관없나...? (혹시 관련내용에 대해 아시는 분은 댓글로 피드백 부탁드려요!)

배워가다 보면 더 좋은 방법을 찾겠지!

 

++2021.06.21 추가

위의 기능과 똑같이 작동하는 다른 방법을 찾아 추가해놓는다.

for문 부분만 바꿨다.

for(let i=0;i<buttons.length;i++){
        buttons[i].addEventListener('click',()=>{
        const val=buttons[i].textContent;
        if(Number(val)||val==='0') numCal(val); //숫자일때
        else operCal(val);//기타 연산자일때
    });
}