타자 연습 게임 만들기(2)

이전에 단어가 화면에 랜덤한 위치에 나오도록 해주었다.

 

이전에 임시로 단어 배열을 만들어서 몇개의 단어만 넣었었는데, 엑셀 파일로 된 단어 묶음을 구해서 약간의 처리를 하여 javascript 배열로 만들어주었다.

약 5500 개의 단어 배열

 

 

이제 input 박스에 단어를 입력했을 때 입력한 단어와 화면에 있는 단어가 같으면 단어가 있는 div 박스를 지우도록 하는

removeStr이라는 함수를 구현해본다.

일단 querySelectorAll 메서드로 현재 화면에 있는 단어 div 박스들을 받는다.

주의할 것은 querySelectorAll로 얻은 NodeList 객체는 유사배열객체라서 배열 메서드를 사용할 수 없기 때문에 

Array.from 메서드로 배열로 만들어준다.

 

removeStr 함수의 인자로 받은 str과 existingStr 배열내에 같은 단어가 존재하는지 확인한다.

같은 단어가 존재한다면 그 단어가 있는 요소의 index를 idx 변수에 담고 반복문을 빠져나온다.

 

처음 선언할 때 idx는 null값을 넣어줬는데, 만약 일치하는 단어가 있다면 idx값은 null이 아닐 것이고, 일치하는 단어가 없다면 idx값이 null일 것이다.

이것을 이용하여 조건문을 작성한다.

 

이렇게 removeStr이라는 함수를 완성했다.

function removeStr(str) {
  let idx = null;
  const existingStr = Array.from(document.querySelectorAll(".random-str")); 
  
  for (let el of existingStr) {
    if (el.textContent === str) {
      idx = existingStr.indexOf(el); 
      break;
    }
  }
  if (idx !== null) {
    existingStr[idx].remove();
  }
}

 

그리고 input박스에 엔터를 입력하면 이벤트가 발생하도록 함수를 작성한다.

input박스가 있는 태그에 접근해서 onkeydown 이벤트에 콜백 함수로 위에서 작성한 removeStr함수를 담아준다.

이 때,  enter키의 keycode인 13일 때만 removeStr 함수가 작동하도록 만들어준다.

const inputBox = document.querySelector("#input-box");
inputBox.onkeydown = (e) => {
  if (e.keyCode === 13) {
    // 엔터키 코드가 13이다.
    removeStr(inputBox.value);
    // input 박스 초기화
    inputBox.value = "";
    }
}

 

완성본