h1 tag를 여러번 클릭 시 파란색 빨간색으로 번갈아가게 나타나도록 하는 click event를 만들어본다.
if와 else를 사용하여 === 기호로 해당 색 확인을 해준뒤 blue면 red로 click event가 나타나게 한다.
=은 같다는 뜻 즉 바꿔달라는 뜻이다.
기본 상태
첫 클릭
두번째 클릭, 반복된다.
이 코드를 더 간략하게 만들어보자면??
const로 변하지 않는 값을 지정해주고,
let으로 변동이 가능한 값을 지정해준다.
그 후 해당 값을 변동이 되어야하는 곳과 그렇지 않은 곳에 넣어준다.
function의 가장 밑에 let의 변수의 의미를 지정해준다.
(위에서 밑으로 자바스크립트는 읽는다.)
javascript 기초 공부를 하며 배운 여러가지를 섞어서 사용해보느라 이 코드를 만들었지만,
사실 style은 css로 적용해주는 것이 더 바람직하다.
JS는 animation에 사용하도록!!
CSS를 함께 적용
아까보다 훨씬 깔끔해졌다.
그치만 active라는 string이 2번이나 사용되었다. ---> 오류가 발생할 가능성 높아짐.
오류 최소화를 위한 방법
변하지 않는 값이라는 뜻인 const를 사용하여 active string을 아예 지정해주자!
그치만 h1에 class를 지정해줄 경우에 생길 버그를 잡아줘야겠다.
HR velog