들어가기 전에

지금까지 우리는 조건문에 대해서 간단하게 배워봤습니다. 그렇다면 조건문을 실제로 어떻게 활용할 수 있을까요? 이번 강의를 통해서 살펴보도록 합시다.

학습 목표

조건문을 활용해서 직접 토글을 구현할 수 있습니다.

핵심 단어

• 조건문
• 토글
• querySelector와 value

강의 듣기

조건문을 활용한 토글 만들기

이번 시간에는 조건문을 활용해서 토글을 만들어 볼겁니다. 먼저 다음과 같이 버튼을 만들어 줍니다.

<input id="night_day" type="button" value="night">

지금부터 이 버튼의 value 값을 기준으로, 이 value가 night면 day 버전으로 바뀌는 코드를, day면 night 버전으로 바뀌는 코드를 실행하도록 프로그램을 만들겁니다.

버튼의 onclick 속성 안에 다음과 같은 Javascript 코드를 써 봅시다.

if(???) {
  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';
}

그렇다면 저 ??? 속에는 어떤 코드가 들어가야 할까요? 우리는 지금부터 document에서 id가 night_day인 버튼을 찾아서, 그 버튼의 value가 "night"인지 아닌지를 찾아내야 합니다. 이를 위해서 다음과 같은 코드를 사용할 수 있습니다.

document.querySelector('#night_day').value

현재 페이지에서 querySelector을 사용해서 id가 night_day인 태그를 찾기 위해서 id를 나타내는 #을 붙여줍니다. 그리고 찾아낸 태그의 value를 알기 위해서 .value를 써 줍니다.

이렇게 가져온 value 값을 night와 비교하면 되겠죠. 그렇다면 다음과 같이 써 주면 됩니다.

if(document.querySelector('#night_day').value === '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';
}

하지만 이 코드에는 결정적인 문제가 있습니다. 바로 버튼이 눌릴 때마다 value가 바뀌지 않는 것이죠. 그렇기 때문에 항상 원래 설정된 value인 night에 해당하는 코드, 즉 첫 번째 중괄호에 있는 코드만 실행되게 됩니다. 이를 해결하기 위해서는 코드가 실행될 때마다 value를 바꿔주는 코드도 추가해주면 됩니다.

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';
}

생각해보기

1) 버튼의 onclick 속성을 다음과 같은 Javascript 코드로 바꾸었다고 해봅시다. 원래 구현한 토글과 차이가 있을까요?

if(document.querySelector('#night_day').value === 'day') {
  document.querySelector('body').style.backgroundColor = 'white';
  document.querySelector('body').style.color = 'black';
  document.querySelector('#night_day').value = 'night';
}
else {
  document.querySelector('body').style.backgroundColor = 'black';
  document.querySelector('body').style.color = 'white';
  document.querySelector('#night_day').value = 'day';
}