[TIL 2022](4) JS javascript로 Dark , Day Mode 만들기 - 2

학습한 내용

• 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');

• 조건문을 사용하여 버튼이 night 조건과 day 조건을 구분한다.

> 최종 코드

'현재 버튼'을 코드로 해석할때는 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';         
        } 
  
    " >

학습내용 중 어려웠던 점

• 나이트와 데이모드에 맞춰 텍스트를 변경시 a태그로 감싸진 텍스트는 색상이 변하지 않았다.
• document.querySelector('a')를 했을 때, 첫번째 태그만 지정이 되었다.
• document.querySelectorAll('a') 사용해보았지만, 작동이 되지 않았다.
• document.querySelectorAll('a') 는 a태그 요소가 리스트(Node list)가 된다.
• 여러개를 한번에 선택하여 스타일을 변경하려면, 반복문을 써야한다.
• 즉, 코드에 있는 a태그를 모두 지정하려면, 반복문 사용하여 색상을 바꾸어 주어야한다.

해결방법

• querySelectorAll에 대해 구글링을 하였고, 참고링크 를 통해 작동이 안되는 원인을 확인하였다.

학습소감

• 이벤트를 적게하여 사용성을 높이는데에 있어서 조건문이 중요하겠다는 생각이 들었다.
• 코드 작성이 수월하도록 동적인 JS에 대해 많이 알아두어야 겠다.