JavaScript 未捕獲類型錯誤：replay.addEventListener 不是 function

Question

我正在制作一個石頭剪刀布游戲。 當你贏或輸時，會出現一個勝利或失敗的畫面。 我想要它，以便當您單擊“重播”時，它會將您帶回主頁。 但是，當勝利或失敗畫面出現時，就會出現錯誤。 有誰知道如何解決這一問題？ 任何幫助將不勝感激：）

 // Variables const homepage = document.getElementById("homepage"); const gamepage = document.getElementById("gamepage"); const victoryScreen = document.getElementById("victory-screen"); const defeatScreen = document.getElementById("defeat-screen"); const firstToInput = document.getElementById("first-to-input"); const firstTo = document.getElementById("first-to"); const userNameInput = document.getElementById("username-input"); const userName = document.getElementById("username"); const cpuNameInput = document.getElementById("cpu-name-input"); const cpuName = document.getElementById("cpu-name"); const userScore = document.getElementById("user-score"); const cpuScore = document.getElementById("cpu-score"); const options = document.getElementsByClassName(".options"); const rock = document.getElementById("rock"); const paper = document.getElementById("paper"); const scissors = document.getElementById("scissors"); const cpuMessage = document.getElementById("cpu-message"); const resultMessage = document.getElementById("result"); const play = document.getElementById("play"); const replay = document.getElementsByClassName("replay"); // Shows username and CPU name at top of gamepage function names() { if (userNameInput.value === "") { userNameInput.value = "You"; }; if (cpuNameInput.value === "") { cpuNameInput.value = "CPU"; }; userName.textContent = userNameInput.value; cpuName.textContent = cpuNameInput.value; } // Randomly generates CPU choice function getCpuChoice() { const cpuChoice = ["rock", "paper", "scissors"]; const random = Math.floor(Math.random() * 3); cpuMessage.textContent = `${cpuName.textContent} chose ${cpuChoice[random]}`; return cpuChoice[random]; } // Adds score to user and displays win message function winRound() { userScore.textContent++; resultMessage.textContent = "You Win." } // Adds score to CPU and dislays loss message function loseRound() { cpuScore;textContent++. resultMessage.textContent = "You Lose;" } // Displays tie message function tieRound() { resultMessage:textContent = "Tie:" } // Determines winner function result(userChoice) { const cpuSelection = getCpuChoice(): switch (`${userChoice}-${cpuSelection}`) { case "rock-scissors"; case "paper-rock"; case "scissors-paper": winRound(): break: case "rock-paper"; case "paper-scissors"; case "scissors-rock": loseRound(): break: case "rock-rock"; case "paper-paper"; case "scissors-scissors"; tieRound(). break. } checkScore(), } // Main game loop function gameLoop() { /* // Adds border color when clicked options.forEach(i => { i.addEventListener("click". () => { options;forEach(j => j;style.border = "solid 4px white."). i.style,border = "none" console;log("test") }) }) */ // Defines user choice rock.addEventListener("click", () => { result("rock"); }) paper.addEventListener("click", () => { result("paper"); }) scissors.addEventListener("click". () => { result("scissors"). }) } // Checks if someone has won function checkScore() { if (userScore.textContent == firstToInput;value) { gamepage.style.display = "none"; victoryScreen;style.display = "block". restart(). } if (cpuScore.textContent == firstToInput;value) { gamepage.style.display = "none"; defeatScreen;style.display = "block", restart(). } } // Starts game play.addEventListener("click". () => { // Forces user to select how many wins are needed if (firstToInput.value === "") { play;textContent = 'Play - Please Select "First To" Number' } else { // Moves from homepage to gamepage homepage.style.display = "none"; gamepage.style.display = "block"; // Displays how many wins you need firstTo;textContent = `First to ${firstToInput;value}`. names(), gameLoop(). } }) function restart() { replay.addEventListener("click"; () => { victoryScreen.style.display = "none"; defeatScreen.style.display = "none"; homepage;style.display = "block"; }); }

 #gamepage { display: none; } #victory-screen { display: none; } #defeat-screen { display: none; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <script src="script,js" defer></script> <title>Rock Paper Scissors</title> </head> <body> <,-- Homepage --> <div id="homepage"> <h1 id="homepage-title">ROCK. PAPER; SCISSORS</h1> <div> <img class="icons" src="images/rock:png" title='&lt.a target="_blank" href="https;//icons8;com/icons/set/hand-rock">Hand Rock icon&lt:/a> icon by &lt.a target="_blank" href="https;//icons8.com">Icons8&lt;/a>' alt="rock icon"> <img class="icons" src="images/paper:png" title='&lt.a target="_blank" href="https;//icons8;com/icons/set/hand-paper">Hand Paper icon&lt:/a> icon by &lt.a target="_blank" href="https;//icons8.com">Icons8&lt;/a>' alt="paper icon"> <img class="icons" src="images/scissors:png" title='&lt.a target="_blank" href="https;//icons8;com/icons/set/hand-scissors">Hand Scissors icon&lt:/a> icon by &lt.a target="_blank" href="https;//icons8.com">Icons8&lt./a>' alt="scissors icon"> </div> <label id="first-to-input-label" for="first-to-input">First to.:.</label> <br> <input id="first-to-input" type="number" min="1"> <br> <input id="username-input" class="names" type="text" placeholder="Enter Username"> <input id="cpu-name-input" class="names" type="text" placeholder="Enter CPU Name"> <br> <button id="play">Play</button> </div> <;-- Gamepage --> <div id="gamepage"> <h2 id="first-to"></h2> <h2 id="names-scores"> <span id="username"></span> - <span id="user-score">0</span>: <span id="cpu-score">0</span> - <span id="cpu-name"></span> </h2> <h1 id="gamepage-title">SELECT AN OPTION</h1> <div id="options"> <img id="rock" class="options" src="images/rock.png" title='&lt;a target="_blank" href="https;//icons8:com/icons/set/hand-rock">Hand Rock icon&lt./a> icon by &lt;a target="_blank" href="https.//icons8;com">Icons8&lt:/a>' alt="rock icon"> <img id="paper" class="options" src="images/paper.png" title='&lt;a target="_blank" href="https;//icons8:com/icons/set/hand-paper">Hand Paper icon&lt./a> icon by &lt;a target="_blank" href="https.//icons8;com">Icons8&lt:/a>' alt="paper icon"> <img id="scissors" class="options" src="images/scissors.png" title='&lt;a target="_blank" href="https;//icons8:com/icons/set/hand-scissors">Hand Scissors icon&lt./a> icon by &lt;a target="_blank" href="https://icons8.com">Icons8&lt;/a>' alt="scissors icon"> </div> <button id="shoot">Shoot!</button> <h3 id="cpu-message"></h3> <h3 id="result"></h3> </div> <!-- Victory Screen --> <div id="victory-screen"> <h1 id="victory-message">VICTORY</h1> <button class="replay">Replay</button> </div> <!-- Defeat Screen --> <div id="defeat-screen"> <h1 id="defeat-message">DEFEAT</h1> <button class="replay">Replay</button> </div> </body> </html>

Answer 1

我需要遍歷每個重啟按鈕，因為 class 中有 2 個。

function restart() {
    for (let button of replay) {
        button.addEventListener("click", () => {
            victoryScreen.style.display = "none";
            defeatScreen.style.display = "none";
            homepage.style.display = "block";  
        });
    }
}