1차에서는 onclick 이벤트로 각각 다크와 데이모드 버튼을 생성
'조건문 condtionla Statment'으로 다크&데이모드 버튼 하나로 만듦 (버튼이 하나여야 사용성이 높음)
조건문을 사용하기 위해서는 배열(array)와 반복문(loop)를 학습함
배열은 [a,b,c] 리스트 형태로 요소와 순서 인덱스를 가진다. 순서는 0부터 시작함
하나로 만들기 위해서 기존 코드를 어떻게 변경하면 좋을지, 텍스트로 먼저 순서를 작성함
1.현재 버튼이 'night'
2.바탕은 검은색으로,텍스트는 흰색으로 변경
3.버튼을 'day'로 변경
1.현재 버튼이 'day'
2.바탕은 흰색으로, 텍스트는 검은색으로 변경
3.버튼을 'night'로 변경한다.
현재 버튼을 지정하는 코드 작성하기 : id값을 주어 쿼리선택을 상세히 한다.
let button = document.querySelector('#dnbtn');
'현재 버튼'을 코드로 해석할때는 this또는 button 처럼 변수를 만들어서 button.value로 표현하는 것이 효율적이다.
<input type='button' id='dnbtn' value="night" onclick="
let button = document.querySelector('#dnbtn');
if (button.value === 'night') {
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
button.value ='day';
} else{
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
button.value ='night';
}
" >