10.2.2 화면 전환하기

화면 종류에 따라 다르게 작동하도록 화면에 이벤트 리스너를 달겠습니다. 그러려면 현재 화면이 어떤 화면인지를 알아야 합니다. 앞 절에서 waiting 클래스는 대기 화면, ready 클래스는 준비 화면, now 클래스는 측정 화면이라고 했습니다. 각 태그에 해당 클래스가 들어 있는지는 4.4.1절에서 배운 태그.classList.contains() 메서드로 확인합니다. 클래스별로 다음과 같이 분기 처리를 합니다.

const $screen = document.querySelector('#screen'); 
const $result = document.querySelector('#result');

$screen.addEventListener('click', function () {
  if ($screen.classList.contains('waiting')) { // 대기 화면
  } else if ($screen.classList.contains('ready')) { // 준비 화면
  } else if ($screen.classList.contains('now')) { // 측정 화면
  }
});

반응속도 테스트는 대기 화면에서 시작하고 대기 화면을 클릭하면 준비 화면으로 넘어갑니다. 이 동작을 위해 화면에서 waiting 클래스를 제거하고, ready 클래스를 추가합니다. 준비 화면으로 전환하면 화면에 ‘초록색이 되면 클릭하세요’라는 메시지가 뜨게 합니다.