addEventListener와 toggle

const title =documet.querySelector("#hello")
const title = documnet.getElementById("hello")

쿼리셀렉터와 겟으로 id가 hello인녀석을 가져오는방법

버튼을 눌렀을때 색깔이 바뀌게 하고싶은 기능을 추가하고 싶다.

여러가지 방법이 있고 이코드를 아주 짧게 줄일수 있는 기능인 toggle에 대해서 알아보자

function handleTitleClick(){
const currntColor = h1.style.color;
let newColor;
if (currentColor ==="blue"){
 newColor = "tomato";
}
else {
newColor = "blue"
}

title.addEventListener("click", hadleTitleClick);

//버튼을 눌렀을때 함수를 실행시키는 addEventListener

조건문을 사용해서 자바스크립트를 이용해 색깔을 바꿔준다

 

h1.style.color =newColor;
title.onclick = handeTitleClick //addEventListener를 사용할때와 똑같은 방법이지만 권장하진않는다 remove를 사용하지못하기 때문.

function handleTitleClick(){
const clickedClass = "clicked";
if(h1.className === clickedClass){
h1.className = "";
}
else{
h1.className=clickedClass;
}
}

 className은 그냥 모든걸 교체해버려 ,이전에 class 들은 상관하지않고 말이야

function handleTitleClick(){
const clickedClass = "clicked";
if(h1.classList.contains(clickedClass)){
h1.classList.remove(clickedClass);
}
else{
h1.classList.add(clickeClass);
}

function handleTitleClick(){
const clickedClass = "clicked";

h1.classList.toggle("clicked"); 위에꺼가 하는거랑 똑같은 역할을하는거임!!!!!!!!!!
}

어떻게 엘리먼트에서 class name을 변경하고 , 제거하고,추가하는지 배웠어

class name을 빈값으로 , class name을 clcikedClass로 바꾼다면 말이지

class name을 바꾸는 다른 방법이고 ,그 방법은 classList를 사용하는 방법이야

ClassList 는 여러분들이 class들의 목록으로 작업할 수 있게끔 허용해줘
왜냐하면 className은 그냥 모든걸 교체해버려 ,이전에 class 들은 상관하지않고 말이야
classList 에서는 조금 다르게할수있어

h1.classList.toggle("clicked");
toggle은 h1의 classList에 clicked class가 이미 있는지 확인해서
만약 있다면 toggle이 clicked를 제거해줘
만약 h1의 classList에 clicked가 존재하지않는다면
toggle은 clicked를 classList에추가해줄꺼야
이게 기본적으로 toggle이하는역할이야
또는 여러분의 스마트폰에 달린 한번 누르면 스크린을 잠그고 다시한번 누르면 스크린을 켜주는 버튼같은거야