[5] 조건문

목표 : night 버튼과 day 버튼을 따로 두지 않고, 하나의 " 토글 "을 구현해서 현재 day 모드라면 night 버튼이 보여지고, night 모드라면 day 버튼이 보이도록 만든다.

 

비교연산자를 통해서 만들어지는 결과는 Boolean 데이터 타입을 가진다.

데이터 타입 : Boolean 은 'True' 와 'False' 의 값만 가진다.

 

내가 짠 코드

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

 

 

강사님 코드

- button 태그에 id 값을 설정 후, id 의 value 값이 'day' 인지 'night' 인지 여부에 따라 코드 실행

javascript element get value

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

코드 작성 진행시 콘솔창에서 테스트해보면 좋음.

Elements 화면에서 value 값을 더블클릭하여 night 와 day 로 변경하면서 document.querySelect('#night_day').value; 값이 어떻게 출력되는지 확인

 

01