toggle로 가는 여정(toggle, classList, className)

 

 

 

 

0

 

 

요즘 js에서 html을 읽는걸 배우고있다.  js가 html과 연결되어있고 상호작용을한다는 사실을 기억하고! 

오늘 내가 할 거는 js를 통해 html을 위와같이 변화시키려는 것이다. 

 

 내가 하고싶은것: 한 번 클릭하면 blue 또 한 번 클릭하면 tomato 또 한 번 클릭하면 blue  또 한 번 클릭하면 tomato  무한반복

 =>이 말을 듣고 내가 생각한것 js에서 html element 호출해오고, event반응 필요하고 , function 의 if으로 참, 거짓 판별 

 

 

 

 html

js

 const h1=documnet.querySelector(".hello h1"); ---> 1.element
 
 
 
function handleTitleClick(){ ---> 3. click 하면function 반응
 
   if(h1.style.color==="blue"){
       h1.style.color = "tomato";
}else{
       h1.style.color = "blue";
}
}
 
h1.addEventListener("click",handleTitleClick); ---> 2. eventListener