<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<button class="btn">10</button>
const btns = document.getElementsByClassName("btn");
btns.forEach(btn => {
btn.addEventListener("click", () => console.log("클릭"))
});
버튼을 클릭할때마다 콘솔이 찍히게 하려하지만 위의 코드는 에러가 납니다.
btns가 배열처럼 보이지만 사실은 유사배열이기 때문에 forEach같은 배열 메서드를 사용할 수 없습니다.
Array.isArray(btns) 을 찍어보면 false가 나오는걸 보실 수 있습니다.
Array.from(btns).forEach(btn => {
btn.addEventListener("click", () => console.log("클릭"))
});
Array.from()으로 배열을 반환받아 사용하면 됩니다.
반응형
'javascript' 카테고리의 다른 글
파일명 자르기 (0) | 2020.07.13 |
---|---|
타입스크립트 기본 타입 (0) | 2020.06.09 |
pushState (0) | 2020.05.22 |
es6로 0부터 n까지 숫자범위 배열 생성 (0) | 2020.05.12 |
IntersectionObserver 이용한 인피니티 스크롤 예제 (0) | 2020.04.03 |