javascript 버튼만들기 V1.0

deokyeong1020·2020년 9월 25일
0

동적인 움직임을 구현하는데 EventLisner의 기능 구현은 필수이다.
그중에서도 각각의 버튼에대한 기능 구현이 정말 중요한데, 인스타의 하트버튼 활성화 기능을 시험하다가, 댓글 한 개의 버튼을 클릭했을때 그 전체 페이지의 '사랑의 불빛'을 받는 불상사를 경험하게 되었다.

그래서 결국 각각의 버튼을 눌렀을때 자기자신을 인식할 수 있는 기초적인 기능을 시험해보고자 다음과 같은 테스트를 실시하였다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script defer src="./index.js"></script>
  </head>
  <body>
    <button id="1" class="test">1</button>
    <button id="2" class="test">2</button>
    <button id="3" class="test">3</button>
    <button id="4" class="test">4</button>
    <button id="5" class="test">5</button>
    <button id="6" class="test">6</button>
  </body>
</html>

1. &nbsp6개의 버튼 나열

일단 각각 버튼을 나열하였다. 처음에 의도자체가 ID를 통해 자기자신을 인식시키고자 함이였으나 결과적으로 ID는 의미가 없게 되었다. 뭐, 그래도 일단
의식의 흐름을 보이고자 이렇게 적어본다.

2. &nbspquerySelectorAll의 활용. querySelector의 예상치 못한 반응...

처음에는 querySelector(".test")를 활용하여 test클래스를 다 가져올 수 있을 줄 알았다. 그러나 잘못된 이해였다. 이 메서드는 단순하게 test클래스 중 가장 먼저 인식되는 것을 가져오는[0]을... 뭐 페이지에서 유일한 기능을 하는 버튼 같은 것을 구현할때나 쓸 수 있는 것이었다.

무언가 반복적으로, 동일한 기능을 하는 것을 불러와야 할 때는 querySelectorAll(".test") 사용하는 것이 맞았다. 참고로 이 기능을 사용하면 요런 값을 가져온다.

const btnSelect = document.querySelectorAll(".test");

console.log(btnSelect)  // 요 아래 값을 가져온다.
/*NodeList(6) [button#1.test, button#2.test, button#3.test, button#4.test, button#5.test, button#6.test]
0: button#1.test
1: button#2.test
2: button#3.test
3: button#4.test
4: button#5.test
5: button#6.test
length: 6
__proto__: NodeList*/

그렇다 NodeList라는 배열을 가져온다. 사실 이것을 보면서 느낀게
그렇다면 getElementbyClassName으로 가져와도 되는 것 아닐까?

const btnSelect = document.getElementsByClassName("test");

console.log(btnSelect);// 요 아래 값을 가져온다.
/*HTMLCollection(6) [button#1.test, button#2.test, button#3.test, button#4.test, button#5.test, button#6.test]
0: button#1.test
1: button#2.test
2: button#3.test
3: button#4.test
4: button#5.test
5: button#6.test
length: 6
6: <unreadable>
__proto__: HTMLCollection*/ 

이걸보면 HTMLCollection인지 NodeList인지만 다르고 같은 값을 출력하는 것을 볼 수 있다.

3. &nbsp재료들을 세팅하는 과정이 완료되었다. 이제는 각각을 호출하기만하면 될뿐..

(Map를 활용하는 방법도 있다고한다... 추후에 배워보자)
우선 아는 범위에서 2가지를 활용하겠다. for문 forEach문... 사실 두가지 방법에는 큰 차이는 없지만 다양한 하나하나 논리적으로 코드를 짚어보자.

btnSelect.forEach((el, idx) => {
  el.addEventListener("click", () => {
    console.log(`${idx + 1}번 버튼입니다.`);
  });
});

해설) btnSelect 배열을 들고와서 forEach구문을 활용해 각각의 배열 요소,인덱스를 파라미터로 하는 메소드를 실행해본다. 그 메소드(addEventListener)로 각 요소의 클릭이벤트를 실현하고 해당하는 요소가 몇 번 버튼인지 콘솔창에 찍어 줄 것이다. 여기서 *번은 인덱스가 아닌 button 안에 들어간 숫자가 나올 수 있도록 임의로 만들어주었다.
//이유는 알 수 없으나 getElementByClassName 으로 가져온 배열은 해석을 못한다.... 그런 for문으로... 위 사항에대한 참고사이트,, NodeList, HTML Collection이 지원하는 메소드냐 아니냐인듯..
참고하세요.

for (let i = 0; i < btnSelect.length; i++) {
  btnSelect[i].addEventListener("click", () => {
    console.log(`${i + 1}번 버튼입니다.`);
  });
}

조금 다른 부분을 보자면, btnSelect 인덱스 번호를 입력하여 각각의 버튼을 호출하는 방식이 차이이다.
아래 부분이 좋은점은 변수 i를 하나만 쓴다는 점?

아무튼 다음 방식을 만들면 버튼을 클릭할 때 마다 아래 스크린샷의 결과를 확인할 수 있습니다.

profile
일일 개발 기록 블로그

0개의 댓글