[JavaScript] 요즘 유행하는 Wordle 따라하면서 만들어 보기-3

 

[JavaScript] 요즘 유행하는 Wordle 따라하면서 만들어 보기-2

지금 버그 중 하나는 두 번째부터는 색상 변경이 안 됩니다

색상을 처리하는 부분은 for문으로 관련된 코드를 살펴봅니다

 

원인 파악

단어를 입력해서 버그가 어떻게 발생하는지 살펴봅니다.

크롬 개발자 도구를 살펴보면 에러 표시가 없습니다

코드 상의 에러가 아니라 처리하는 방식에 뭔가 문제가 있습니다

let input = document.querySelectorAll('input');
console.log(input);

단어를 가져오는 곳부터 한 줄씩 살펴봅니다

0번~4번까지는 input 첫 줄을 의미하고 5번~9번까지는 두 번째 줄을 의미합니다

for문의 조건과 가져오는 값의 차이 때문에 발생하는 문제였습니다

for(let i = 0; i < 5; i++){
    if(input[i].value == answer[i]){
        input[i].style.background = 'green';
    }else if(answer.includes(input[i].value)){
        //includes 문자열 검사
        input[i].style.background = 'yellow';
    }else{
        input[i].style.background = 'lightgrey';
    }
    //input class 제거
    input[i].classList.remove('input');
}

for문의 조건은 0~4번째의 input을 처리하도록 되어 있습니다

그리고 마지막에 "input [i]. classList.remove('input');"를 통해서 input의 class명을 제거해 줍니다

"let input = document.querySelectorAll('input');"로 input 태그를 가져오게 되어있습니다

문제 해결

이 부분을 class명이 input 태그를 가져오도록 변경합니다

//이전 코드
let input = document.querySelectorAll('input');
//변경 코드
let input = document.querySelectorAll('.input');

위와 같이 변경하면 class명이 input 태그를 모두 가져오고

for문으로 5개의 input 태그만 확인합니다

그리고 색상 변경 후 input 태그를 지워줍니다

이제 두 번째부터 색상이 표시됩니다

만약에 for문의 조건을 변경하고 싶으면 고정된 "i < 5"의 조건을

마지막 input 태그의 5개만 가져오게 변경합니다

그리고 사용할 이유가 없는 class명이 input을 제거하는 코드를 제거하면 됩니다