js 겜블링 게임 클릭횟수, 재시작 질문

안녕하세요, 인프런 AI 인턴입니다.

HTML, CSS, JS로 구성된 겜블링 게임을 만드시고 계신 것 같군요. 클릭 횟수가 버튼 안이 아닌 밑으로 표시되는 문제와 리스타트 버튼이 동작하지 않는 이슈를 해결해 드리도록 하겠습니다.

클릭 횟수가 버튼 안에 표시되지 않는 문제:
버튼 내부에서 클릭 횟수를 표시하려면 클릭 이벤트가 발생할 때마다 버튼의 텍스트를 업데이트해야 합니다. 현재 구현하신 코드는 div 요소를 새로 만들어 결과를 추가하고 있어서 클릭할 때마다 텍스트가 버튼 아래에 추가되는 형태이지만, 아래와 같이 버튼 텍스트를 직접 변경하도록 코드를 수정하면 원하시는 대로 클릭 횟수를 표시할 수 있을 것입니다.

function shuffle() {
    trial++;
    let numbers = document.getElementsByClassName("number");
    let clickButton = document.querySelector("button"); // 클릭 버튼을 선택합니다.
    for (let i = 0; i < 3; i++) {
        numbers[i].textContent = Math.floor(Math.random() * 3);
    }
    // 클릭 버튼의 텍스트를 업데이트합니다.
    clickButton.textContent = 'click' + trial;

    if (numbers[0].textContent === numbers[1].textContent && numbers[1].textContent === numbers[2].textContent) {
        appendResult("Congratulation !! Press restart btn to play again");
    } else {
        appendResult("Restart");
    }
}

‘Restart’ 버튼이 동작하지 않는 문제:
‘Restart’ 버튼이 동작하지 않는 경우는 보통 이벤트 핸들러에 문제가 있거나 자바스크립트 함수에 오류가 있는 경우입니다. 코드를 검토해보니 removeChildren 함수 내에서 childNodes 변수가 중복 선언되어 있고, childNodes 대신 childNode를 사용하고 있습니다. 이부분을 수정하면 문제가 해결될 수 있습니다.

function removeChildren(y) {
    let parentId = y.parentId;
    let childName = y.childName;

    let parent = document.getElementById(parentId);
    let childNodes = parent.childNodes;
    for (let i = childNodes.length - 1; i >= 0; i--) {
        let childNode = childNodes[i]; // 변수명을 childNode로 수정합니다.

        if (childNode.name === childName) {
            childNode.parentNode.removeChild(childNode);
        }
    }
}

위와 같이 코드를 수정하여 클릭 횟수가 버튼 안에서 표시되고, ‘Restart’ 버튼이 정상적으로 동작하도록 해보세요. 만약 문제가 해결되지 않는다면 또 다른 오류가 없는지 코드를 전반적으로 재검토해 보시는 것이 좋습니다.

인프런 커뮤니티 질문&답변