더북(TheBook)

수정한 순서도를 코드로 옮겨 보겠습니다. 먼저 $input.value''을 대입해 input 태그를 빈 값으로 만듭니다. 그리고 focus() 메서드로 input 태그를 선택해 커서가 위치하게 합니다. 해당 작업은 입력창에 단어가 표시되는 곳(3곳)에서 모두 해야 합니다.

const onClickButton = () => {
  if (!word) { // 제시어가 비어 있는가? 
    word = newWord; // 입력한 단어가 제시어가 됨 
    $word.textContent = word; // 화면에 제시어 표시
    const order = Number($order.textContent); 
    if (order + 1 > number) { 
      $order.textContent = 1;
    } else {
      $order.textContent = order + 1;
    }
    $input.value = ''; // 입력창을 비움
    $input.focus(); // 커서를 위치시킴
} else { // 비어 있지 않음
    if (word.at(-1) === newWord[0]) { // 제시어에 맞는 단어인가?
      word = newWord; // 현재 단어를 제시어에 저장
      $word.textContent = word; // 화면에 제시어 표시
      const order = Number($order.textContent); 
      if (order + 1 > number) { 
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.