강의를 통해 비교연산자, 불리언, 조건문이라는 도구를 살펴보았고
이 관념적인 도구들이 얼마나 현실에서 구체적인 도움을 주는지 확인해보자

지난 강의에 만들었던 night day 버튼을 하나로 합쳐 보자!

일단 버튼을 하나 만들고 조건을 작성해보자

  <input id="night_day" type="button" value="night" onclick="
    if(night){
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';
    } else {
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
    }
  ">

이제 상황에 맞게 ()안에 true false가 되게 하면 되는데
그걸 하기 위해서 처음 할일은 현재 이 버튼의 value값이 무엇인가를 알아내야한다

1 value 값 찾아내기

.value라는 property를 쓰면 된다고 나와있다
다음으로 console을 이용해서 알아보면 된다

console을 통해 확인해본 결과 코드를 통해
id값이 night_day인 태그의 value값을
가져올 수 있다

2 조건문 완성하기

    <input id="night_day" type="button" value="night" onclick="
    if(document. querySelector('#night_day').value === 'night' ){
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';
      document. querySelector('#night_day').value = 'day';
    } else {
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      document. querySelector('#night_day').value = 'night';
    }
    ">

위에서 id값이 night_day인 태그의 value값이 night인 것을 확인했으니

if(document. querySelector('#night_day').value === 'night' )

1 첫번째 빨간줄 조건문
#night_day 의 값이 night와 같다면 야간모드를 실행하고
그렇지 않다면 주간모드에 해당되는 코드가 실행되도록 하면된다

하지만 야간모드를 바꾸고 난뒤 주간모드로 변경되지 않는다
현재 상태가 night이므로 계속 조건 부분이 실행되고 있다

2 코드가 실행됐을때 이 value값을 night에서 day로 바꿔야 하는데
두번째 빨간줄 코드를 적용하면 해결된다

 document. querySelector('#night_day').value = 'day';

3 코드를 추가하고 아래의 주간모드에도 night로 바꿔주는 코드를 추가하면 완성!

 document. querySelector('#night_day').value = 'night';

이번 강의에서 이해가 안돼서 강의를 몇번씩 돌려보고
나만 이해가 안되는건가ㅠㅠ 절망😢
댓글보니 다른 분들도 어려운것 같아 위안을 받았다

이해하신분이 댓글을 하나 남겨주셨는데 이걸로 이해가 되었다!
댓글을 남기며 다음강의를 들으러 가보자🔥

LifeD

id값을 night_day로 주었으니 if문장에서 body 대신 id값(night_day)을 넣어서 버튼을 타겟팅할 수 있고 그 다음 이항연산자 ===로 인해 현재value가 night이면(값이 참) 밑에 작성한 코드가 실행이 되고(백그라운드컬러-블랙, 컬러-화이트), 실행이 된 후에 value값은 day를 가진다.
즉 버튼의 이름이 day로 바뀌게 된다는 거죠.
그 상황에서 다시 버튼을 보시게 되면 버튼 의 이름은 day, 즉 맨 위에 id값(#night_day).value는 day 상태 이겠죠? 이후 코드를 보시면 value==='night'인데 현재 value값은 day잖아요. 때문에 이건 거짓(else)이 되겠죠.
때문에 참일 때 즉 if안에 있는 코드는 무시가 되고 그 밑에 else에 있는 코드가 실행되는 것이고 코드 내용에 따라 백그라운드컬러는 화이트, 컬러는 블랙이 되고 id.value값 즉 버튼의 이름은 night가 되지요.
혹시 저처럼 헤메는 분이 계실까 싶어서 제가 이해한대로 작성했습니다. 참고가 된다면 좋겠습니다.