为什么我的代码被多次调用？

Question

我正在尝试创建一个基于石头剪刀布的简单冒险游戏。 所有逻辑都按预期工作，但是为什么当我按下升级屏幕上的按钮时我的代码会被多次调用？ 在它周围的第一个 go 上被调用一次，在它周围的第二个 go 上被调用两次，依此类推。 这是游戏的初始设置。 在设置了玩家和敌人的统计数据后调用此方法。

//Start of the game
const startOfGame = () => {
    console.log("Hello")
    document.querySelector(".human-player h2").innerHTML = playerName;
    document.querySelector(".human-player h3").innerHTML = `${playerCurrentHP}/${playerMaxHP}`;
    document.querySelector(".computer-player h2").innerHTML = enemyName;
    document.querySelector(".computer-player h3").innerHTML = `${enemyCurrentHP}/${enemyMaxHP}`;
    document.querySelectorAll("img").forEach(img => {
        img.addEventListener("click", () => {
            const previousAttack = document.querySelector(".previous-attack");
            const playerAttack = img.id;
            console.log(playerAttack);
            const enemyAttack = Player.foeAttack(previousAttack.innerHTML);
            console.log(enemyAttack)
            previousAttack.innerHTML = enemyAttack;
            const winner = checkWinner(playerAttack, enemyAttack)
            displayResults(winner, playerAttack, enemyAttack);

        })
    })

}

checkWinner(playerAttack,enemyAttack) 只是检查谁赢得了战斗并且不会被调用两次。 这是 displayResults(winner, playerAttack,enemyAttack) 代码

const displayResults = (winner, pAttack, eAttack) => {
    const okBtn = document.querySelector(".ok");
    const attacks = document.querySelector(".choose-attack");
    const results = document.querySelector(".results");
    const resultsText = document.querySelector(".info h2");
    attacks.classList.replace("fadeIn", "fadeOut");
    results.classList.replace("fadeOut", "fadeIn");
    if (winner === -1) {
        const damage = Player.dealDamageTo(enemy, player);
        console.log(damage);
        playerCurrentHP -= damage;
        if (playerCurrentHP < 0) {
            playerCurrentHP = 0;
        }
        console.log(resultsText)
        resultsText.innerHTML = `${enemyName}\'s ${eAttack} beats ${playerName}\'s ${pAttack}<br>${enemyName} deals ${damage} damage to ${playerName}`;
        document.querySelector(".human-player h3").innerHTML = `${playerCurrentHP}/${playerMaxHP}`;
        document.querySelector(".computer-player h3").innerHTML = `${enemyCurrentHP}/${enemyMaxHP}`;
    }
    if (winner === 0) {
        resultsText.innerHTML = `Both ${playerName} and ${enemyName} chose ${pAttack}<br>No damage is dealt`;

    }
    if (winner === 1) {
        const damage = Player.dealDamageTo(player, enemy);
        console.log(damage);
        enemyCurrentHP -= damage;
        if (enemyCurrentHP < 0) {
            enemyCurrentHP = 0;
        }
        console.log(resultsText)
        resultsText.innerHTML = `${playerName}\'s ${pAttack} beats ${enemyName}\'s ${eAttack}<br>${playerName} deals ${damage} damage to ${enemyName}`;
        document.querySelector(".human-player h3").innerHTML = `${playerCurrentHP}/${playerMaxHP}`;
        document.querySelector(".computer-player h3").innerHTML = `${enemyCurrentHP}/${enemyMaxHP}`;
    }
    //Functiont to continue game if player and enemy are not dead
    if (playerCurrentHP > 0 && enemyCurrentHP > 0) {
        okBtn.addEventListener("click", () => {
            attacks.classList.replace("fadeOut", "fadeIn");
            results.classList.replace("fadeIn", "fadeOut");
            resultsText.innerHTML = "Choose your next attack!"
            return;
        })
    }

    //Function to reload game if player is dead
    if (playerCurrentHP === 0 && enemyCurrentHP > 0) {
        const endBtn = document.querySelector(".end");
        resultsText.innerHTML = "You have lost";
        okBtn.style.opacity = 0;
        okBtn.style.pointerEvents = "none";
        endBtn.style.opacity = 1;
        endBtn.style.pointerEvents = "all";

        endBtn.addEventListener("click", () => {
            location.reload()
        })
    }

    //Function to reset the values if enemy is dead, level up the player and create a new enemy to fight
    if (playerCurrentHP > 0 && enemyCurrentHP === 0) {
        results.classList.replace("fadeIn", "fadeOut");
        count++;
        resultsText.innerHTML = "Choose your Reward!<br>The stat you choose will increase by 5<br>(10 if you choose HP)"
        const levelUpScreen = document.querySelector(".level-up");
        attacks.classList.replace("fadeIn", "fadeOut");
        levelUpScreen.classList.replace("fadeOut", "fadeIn");
        console.log(count);

        document.querySelectorAll("button").forEach(button => {
            button.addEventListener("click", () => {
                if (button.className === "hp") {
                    setUpGame((player.hp + 10), player.power, player.def);
                    console.log(player, enemy)
                    document.querySelector(".human-player h3").innerHTML = `${playerCurrentHP}/${playerMaxHP}`;
                    document.querySelector(".computer-player h2").innerHTML = enemyName;
                    document.querySelector(".computer-player h3").innerHTML = `${enemyCurrentHP}/${enemyMaxHP}`;

                }
                if (button.className === "power") {
                    setUpGame(player.hp, (player.power + 5), player.def);
                    console.log(player, enemy)
                    document.querySelector(".human-player h3").innerHTML = `${playerCurrentHP}/${playerMaxHP}`;
                    document.querySelector(".computer-player h2").innerHTML = enemyName;
                    document.querySelector(".computer-player h3").innerHTML = `${enemyCurrentHP}/${enemyMaxHP}`;

                }
                if (button.className === "defense") {
                    setUpGame(player.hp, player.power, (player.def + 5));
                    console.log(player, enemy)
                    document.querySelector(".human-player h3").innerHTML = `${playerCurrentHP}/${playerMaxHP}`;
                    document.querySelector(".computer-player h2").innerHTML = enemyName;
                    document.querySelector(".computer-player h3").innerHTML = `${enemyCurrentHP}/${enemyMaxHP}`;

                }
                console.log(button);
                levelUpScreen.classList.replace("fadeIn", "fadeOut");
                attacks.classList.replace("fadeOut", "fadeIn");
                resultsText.innerHTML = "Choose your attack";
                return;
            })
        })
    }
}

我知道它有点长，我可能会将其分解为单独的函数甚至是不同的文件以使其更短，但问题发生在注释之后 //如果敌人死了，重置值的函数，升级玩家并创造一个新的敌人。 特别是，问题出现在该部分底部附近的 setUpGame() 部分中。 我对网站开发和 JavaScript 还是很陌生。 那么，为什么代码会被调用两次呢？

Answer 1

感谢mplungjan，我现在明白发生了什么。 设置的代码完全按照它所说的那样做，即添加一个事件侦听器。 我理解这意味着它做到了，这就是它会做的事情。 但是，由于我每次调用 displayResults() 时都添加了一个事件侦听器，因此它会在第一次之后调用 BOTH（等等）事件事件侦听器。