19.12.13 개발기록 -[Javascript] 반복문을 이용하여 버튼 3개에 각각의 id 부여, onclick 이벤트 발생 시 어떤 버튼을 클릭했는 지 구분 가능하게 하기.

오늘은 반복문을 이용하여 버튼 3개를 만들고, 각 버튼에 id를 부여하여 3개중 어느 하나를 클릭 했을 때 자신에게 맞는 이벤트가 발생하게 하는 프로그래밍을 해보자.

말로 설명하기 디게 어려우니, 사진으로 하나씩 차근차근 설명해보자.

아래쪽 화살표가 있는 버튼 3개가 있고, 각 버튼을 클릭 시  각자에게 맞는 이벤트가 발생하도록 한다.

위 사진에서, 아래의 사진과 같이 구현하고 싶다는 뜻이다.

1. 첫 번째 버튼을 클릭했을 때,

첫 번째 버튼 클릭 시

2. 두 번째 버튼 클릭 시,

첫 번째 서랍은 닫히고, 두 번째 서랍만 열린다.

3. 세 번째 버튼 클릭 시,

나머지 2개는 닫히고, 자기 자신의 서랍장만 열린다.

요렇게 말이다.

우선 첫 번째로 할 일은, 각 버튼을 for 반목문을 이용하여 만들면서, 각각에 id를 줄 수 있어야 한다. 나 같은 경우는, for 문을 돌면서 버튼을 생성하면서, 'btn' + i  라는 id를 부여했다.

for (var i in prediction) {        
 
        var predictionBoxButton = document.createElement('div');
        predictionBoxButton.innerHTML = '<i class="fas fa-chevron-down"></i>';
        predictionBoxButton.id = 'btn' + i;
        predictionBoxButton.className = 'my_prediction_button_down';
        predictionBox.appendChild(predictionBoxButton);
    }

그래서 각 버튼은 btn0, btn1, btn2 라는 id를 가질 수 있게 되었다.

그리고 이 기능을 구현하면서 하나 배운 것은 [id^=btn] 이라는 것이다. 이는 정규식 표현이고, 아이디에 btn이 들어가 있는 녀석을 지칭하는 코드이다.

var id = $(this.attr("id) ---> 클릭 된 버튼의 id를 가져와서 저장해준다.

var btnDiv = document.getElementById(id)는 btnDiv에 버튼 자체를 저장한다.

사실 위는 onclick 이벤트안에서 this를 사용해주어도 똑같지만, 다시 서랍을 접는 버튼 (위로 화살표 버튼)을 눌렀을 때 아래로 화살표 버튼을 다시 show 해줘야할 때 필요하다.

사진 처럼 말이다.

여기에서 predictionBoxUpButton은 위로 화살표 버튼이다. 

여기서 this는 위로 화살표 버튼을 가르키기 때문에, btnDiv를 미리 저장해주고, 여기서 show 기능을 사용해주도록 한다.

 

이 포스팅을 보시는 분 중 제가 틀린 부분, 잘못 이해한 부분이 있어 알려주실만한 내용이 있다면 언제든 편하게 댓글 남겨주세요 :)

감사합니다 !