getElementsByClassName() 가는데 index 간다.

Summary

이정도야 뭐~

 

사건의 시작은 html에서부터... id를 쓰지 않은 것.

평소에 id를 잘 쓰지 않기에 이번에도 className만 작성하고 그냥 넘어갔습니다.

별 생각없이 css와 js까지 작성하고 버튼을 클릭했는데!

버튼을 누르자마자 보이는 건 빨간줄이었고...이유는 이놈이었다..

const $container = document.getElementsByClassName("container");

---

Problem

js에서 html 요소에 className으로 접근한 후 액션에 맞추어 class를 추가해주려고 했는데 오류가 났습니다.

CSS 변경이 안돼...

const $container = document.getElementsByClassName("container");

 

---

 

Solved

getElementsByClassName을 사용한 요소를 console에 찍어보았더니 납득.

 

getElementsByclassName

원한 결과

ClassName 사용법을 찾아봤습니다. 인덱스와 함께 해야한다는 소문. 

아래 코드로 바로 해결, 편안.

const $container = document.getElementsByClassName("container")[0];

해결

물론 getElemtsById로 바꿔서 써도 되지만 똥고집을 못버려서 인덱스를 추가했습니다.

 

오늘의 교훈 : 사용법을 제대로 익히고 쓰자^^