querySelector,if문 오류 났던것들...

아래의 코드를 쓰면서 실수했던 점을 정리하고자 한다.

const hello = document.querySelector(".hello")
hello.style.color="white"


function handlerResize(){
  const innerWidth=window.innerWidth;
  const body=document.body;

  if(innerWidth>800){
    body.style.backgroundColor="yellow"
  }else if(innerWidth<800 && innerWidth>600){
    body.style.backgroundColor="purple"
  }else if (innerWidth<600 && innerWidth>400){
    body.style.backgroundColor="blue"
  }

}

window.addEventListener("resize",handlerResize)

실수 1: querySelector 사용 시 클래스 이름에 . 누락

const hello = document.querySelector(".hello");

위 코드에서 querySelector를 사용할 때 클래스 이름 앞에 (.)를 써줘야 하는데 까먹고 계속 hello만 썼더니 계속 오류가 떴다.

실수 2: 조건문에서 범위 표현 방식

if (innerWidth < 800 && innerWidth > 600) {
  ...
}

위 코드에서 범위를 표현할 때 innerWidth < 800 && innerWidth > 600 형식으로 작성해야하는데 계속 800 > innerWidth > 600 식으로 작성해서 오류가 났다.

느낀점

엄청 기본 개념인데도 실제로 코드를 내가 직접 작성하려고 하니까 너무 헷갈렸다. 이래서 강의만 듣지 말고 직접 구현을 해보라는건가라는 생각이 들었다.