点击JS生成的「再来一局」按钮后旧内容未清除的问题求助

问题：点击JavaScript生成的「Play again!」按钮执行resetGame()函数时，#key-container内的原有提示文本和按钮未被清除，新生成的键盘会叠加在原有内容下方，需要重置时完整清除旧内容再生成新键盘。

解决方案 #

在resetGame()函数的开头，添加一行代码清空#key-container的内容，这样后续调用createKeys()时就会在空容器中生成新键盘，避免叠加。

修改后的JavaScript代码 #

var animals = ["dog","cat"]
let answer = "";
let guessed = [];
let animalStatus = null;
let wrongGuess = 0;

function randomAnimal() {
    answer = animals[Math.floor(Math.random() * animals.length)];
}

function createKeys() {
const keyboard = document.querySelector("#key-container");
const keys = [
    "q", "w", "e", "r", "t", "y", "u", "i", "o", "p",
    "a", "s", "d", "f", "g", "h", "j", "k", "l",
    "z", "x", "c", "v", "b", "n", "m"
];

keys.forEach(key => {
    const buttonElement = document.createElement("button");
    const insertLineBreak = ["p", "l"].indexOf(key) !== -1;
    buttonElement.textContent = key;
    buttonElement.setAttribute("id", key);
    buttonElement.addEventListener('click', () => handleClick(key));
    keyboard.appendChild(buttonElement);

    if (insertLineBreak) {
        keyboard.appendChild(document.createElement("br"));
    }
});
}

function guessedAnimal() {
    animalStatus = answer.split("").map(letter => (guessed.indexOf(letter) >= 0 ? letter : " _ ")).join("");
    document.getElementById("word-input").innerHTML = animalStatus;
}

function gameWon() {
    if (animalStatus === answer) {
        let oldScore = parseInt(document.getElementById("win").innerText);
        document.getElementById("win").innerText = ++oldScore;
        document.getElementById("key-container").innerHTML = `Well done! That was correct!<br> <button id="reset" 
        onclick="resetGame()">Play again!</button>`;
    }
}

function gameLost() {
    if (wrongGuess === 6) {
        let oldScore = parseInt(document.getElementById("loss").innerText);
        document.getElementById("loss").innerText = ++oldScore;
        document.getElementById("key-container").innerHTML = `Unfortunately you ran out of possible guesses.<br>
        Correct answer was: ${answer}!<br><button id="reset" onclick="resetGame()">Play again!</button>`;
    }
}

function resetGame() {
    // 新增：清空key-container内的所有内容
    document.getElementById("key-container").innerHTML = "";
    guessed = [];
    wrongGuess = 0;
    document.getElementById("pic").src = `assets/images/hangmanGamePic0.png`;
    randomAnimal();
    guessedAnimal();
    createKeys();
}

说明 #

• 在resetGame()函数开头添加document.getElementById("key-container").innerHTML = "";，会直接清除容器内的所有现有元素（包括提示文本和Play again按钮），确保后续生成的新键盘是从头渲染，不会和旧内容叠加。

内容的提问来源于stack exchange，提问作者Darko Zlatarek