😡 HTML Collection to Array 안되는 경우

문제점 : 자꾸 html collection이라고 떠서, array로 바꿔주니 length가 0이 되었다.

✔ 1. "html collection to array length 0" 검색하기.

• 참고 웹 문서 : html collection to array length 0 || stackoverflow

✔ 2. 돌아가지 않는 이유

• 돌아가지 않는 이유 : 요소들이 DOM에 세워지기 전에, js 코드가 먼저 돌아가서 안되는 것 이다.

✔ 3. 해결하는 방법

• 해결할 수 있는 방법

1. script를 이용해서 js파일을 연결시키지 말고, 바로 html body 안 마지막 부분에 직접 js 코드를 넣어주기.
   -> 하지만, 이 방법은 유지 보수할 때 좋지 않기 때문에 이용하지 않는다.

2. DOM이 먼저 실행된 이후에 js 코드가 돌아갈 수 있도록 기다린다.
   -> 함수로 감싸주기

// jQuery's
$(document).ready

// if you're not running jQuery: 
document.addEventListener("DOMContentLoaded", function(e) {// do stuff })

첫 번째는 $를 인식을 못하기 때문에, 두 번째 방법을 이용하니 제대로 출력되었다.

document.addEventListener("DOMContentLoaded", function (e) {
  //  console.log(colors);
  // console.log(Array.from(colors));
  Array.from(colors).forEach((color) =>
    color.addEventListener("click", handleColorClick)
  );
});

😀 결론...

요소들이 DOM에 세워지기 전에, js 코드가 돌아가면 인식이 안 될수도 있다.