问JavaScript未捕获TypeError: replay.addEventListener不是函数

EN

// 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>