<작성 코드>

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>쿵쿵따 게임</title>
</head>
<body>
    <div>쿵쿵따 게임</div>
    <div><span id="order">1</span>번째 참가자</div>
    <div>제시어 : <span id="word"></span></div>
    <input type="text">
    <button>확인</button>
</body>
</html>

    <script>
        const $word = document.querySelector('#word');
        const $input = document.querySelector('input');
        const $button = document.querySelector('button');
        const $order = document.querySelector('#order');
        const number = Number(prompt('몇 명입니까?'));
        let newWord; // 입력한 단어
        let word; // 제시어
        const onClickButton = () => {
            if(!word){
                word = newWord; 
                $word.textContent = word;
                alert(newWord+' ! 쿵쿵따');
                $input.value = '';
                $input.focus();
                const order = Number($order.textContent); // 현재 순서
                if(order < number){
                    $order.textContent= order + 1;
                } else {
                    $order.textContent = 1;
                }
            } else {
                if(word[word.length - 1] === newWord[0]){
                    word = newWord; 
                    $word.textContent = word;
                    alert(newWord+' ! 쿵쿵따');
                    $input.value = '';
                    $input.focus();
                } else {
                    alert('틀렸따');
                    $input.value = '';
                    $input.focus();
                }
            }
        }
        const onInput = (event) => {
            newWord = event.target.value;
        }

        $input.addEventListener('input', onInput);
        $button.addEventListener('click', onClickButton);
    </script>

<발생 오류>

                const order = Number($order.textContent); // 현재 순서
                if(order < number){ // 현재 순서가 참가자 수보다 작으면
                    $order.textContent= order + 1; // 다음 순서로 넘겨라
                } else { // 현재 순서가 참가자수와 같아지거나 커지면
                    $order.textContent = 1; // 첫 번째 순서로 돌아가라
                }

현재 order가 2로 바뀐 후부터는 더 이상 order가 증가하지 않는 문제가 발생

<디버깅>

        const onClickButton = () => {          
            if(!word){        
                word = newWord; 
                $word.textContent = word;
                alert(newWord+' ! 쿵쿵따');
                $input.value = '';
                $input.focus();
                const order = Number($order.textContent); // 현재 순서
                if(order < number){
                    $order.textContent= order + 1;
                } else {
                    $order.textContent = 1;
                }
            } else {
                if(word[word.length - 1] === newWord[0]){
                    word = newWord; 
                    $word.textContent = word;
                    alert(newWord+' ! 쿵쿵따');
                    $input.value = '';
                    $input.focus();
                } else {
                    alert('틀렸따');
                    $input.value = '';
                    $input.focus();
                }
            }
        }

order가 2가 된 후부터는 제시어가 비어있지 않은 상태, 즉 else 문으로 넘어갈 차례이다. 하지만 나는 else문에서 다음 순서로 넘기는 코드를 넣지 않았다. 그래서 order가 더 이상 증가하지 않았던 것이다.

<수정 후 코드>

        const onClickButton = () => {
            if(!word){
                word = newWord; 
                $word.textContent = word;
                alert(newWord+' ! 쿵쿵따');
                $input.value = '';
                $input.focus();
                const order = Number($order.textContent); // 현재 순서
                if(order < number){
                    $order.textContent= order + 1;
                } else {
                    $order.textContent = 1;
                }
            } else {
                if(word[word.length - 1] === newWord[0]){
                    word = newWord; 
                    $word.textContent = word;
                    alert(newWord+' ! 쿵쿵따');
                    $input.value = '';
                    $input.focus();
                    const order = Number($order.textContent); // 현재 순서
                    if(order < number){
                        $order.textContent= order + 1;
                    } else {
                        $order.textContent = 1;
                    }
                } else {
                    alert('틀렸따');
                    $input.value = '';
                    $input.focus();
                }
        }

수정 후 order가 잘 증가함.

<이번 오류로 알게 된 점과 추가 연구할 점>

앞으로 조건문에서 if문 외에 else문에서도 같은 코드가 실행될 필요가 있는지 확인해보자.
변수 order 선언문이 if문 밖에서 선언되었을 때 order의 값이 2에서 멈추고 더 이상 증가하지 않았다.

<변수 order 선언문이 if문 밖에서 선언되면 안되는 이유>

Chat gpt 3.5 답변:

else 문에서 order가 증가하지 않는 이유는 코드에서 order 변수를 잘못 사용했기 때문입니다. 코드를 살펴보면 order 변수는 초기에 Number($order.textContent)로 설정되었고, 한 번 설정된 후에는 변경되지 않습니다. 따라서 if (order < number) 조건은 항상 초기 설정 값과 비교를 하게 됩니다.

해결책으로는 onClickButton 함수 내에서 $order.textContent 값을 가져와서 숫자로 변환하는 방법이 있습니다.

나의 생각:

Chat gpt 답변에 따르면 order의 초기 설정 값은 항상 1이기 때문에 else문 내의 if문에서도 $order.textContent= order + 1 의 값은 2이기 때문에 더 이상 증가하지 않는 것일까? 추가로 물어봤다.

Error & Solution _ else문도 신경 쓰기 _ (07152024-1)

Subscribe to my newsletter

GaramYoon

GaramYoon