마지막으로 prompt()로 연 대화상자에서 취소를 클릭하면 다음 코드가 실행되지 않게 해야 합니다. 이 부분을 어려워하는데 생각보다 간단합니다. 오래 고민했다면 간단하게 생각하는 연습을 해야 합니다.

const number = Number(prompt('참가자는 몇 명인가요?'));

if (number) {

  const $button = document.querySelector('button');
  (중략)
  $button.addEventListener('click', onClickButton);

}

이처럼 number 값에 따라 if 문으로 나머지 코드를 감싸면 됩니다. prompt()로 연 대화상자에서 취소를 클릭하면 값이 null이 되고, 그 값이 Number 함수에 들어가면 NaN이 됩니다. NaN은 if 문에 들어가면 항상 false로 취급되므로 number가 null이면 if 문 내부는 실행되지 않습니다.

본문으로