對多個 HTML 文件使用一個 JS 文件時出錯

Question

我正在用 HTML、CSS 和 JS 制作石頭、紙、剪刀游戲。 我有一個主頁（允許用戶 select 多少輪並為自己和 CPU 輸入用戶名）和一個實際玩游戲的游戲頁面。 這意味着我有兩個 HTML 頁面，一個稱為index.html另一個稱為game.html 。 當我點擊播放時，JS 文件會存儲輪數和用戶名。 主頁上沒有錯誤。 但是，當我將 go 轉到游戲頁面時，就會發生錯誤，說Uncaught TypeError: Cannot read property 'addEventListener' of null 。 任何幫助將不勝感激：）

這是JS代碼：

// Sets number of wins and rounds
let wins = undefined;
let rounds = document.querySelectorAll(".rounds");
    rounds.forEach(i => {
        i.addEventListener("click", () => {
            rounds.forEach(j => j.style.cssText = "color: white; border-color: white");
            i.style.cssText = "color: gray; border-color: gray";
            wins = Math.round((i.textContent.slice(-1)) / 2);
        });
    });

// Starts game
let play = document.getElementById("play").addEventListener("click", () => {
    // Stores player and CPU names
    let playerName = document.getElementById("player-name").value;
    let cpuName = document.getElementById("cpu-name").value;
    if (playerName === "") {
        playerName = "You";
    }
    if (cpuName === "") {
        cpuName = "CPU";
    }
    window.location.replace("/game/game.html");
});

這里是index.HTML代碼

    <div id="rounds">
        <button class="rounds">Best of 1</button>
        <button class="rounds">Best of 3</button>
        <button class="rounds">Best of 5</button>
    </div>
    <div id="names">
        <input id="player-name" class="names" type="text" placeholder='Enter Your Name'>
        <input id="cpu-name" class="names" type="text" placeholder='Enter CPU Name'>
    </div>
    <button id="play">Play</button>

game.HTMl文件只是一些填充文本。

Answer 1

這可能看起來稍微復雜一些，但它

• 命名空間我們所有的對象
• 允許我們使用這些中的“this”來引用我們的 object
• 有一個 function 調用來實例化它
• 避免除我們的命名空間之外的任何全局對象
• 使用更好的類，允許我們設置一些更好的 CSS 而無需每次都替換它
• 切換類，以便我們得到 CSS 我們可以在邏輯之外進行操作（更改背景顏色等）

 /namespace all our stuff to avoid globals var myApp = { wins: 0, playerName: "Wilber", player: {}, cpu: {}, cpuName: "CPU", // so we can use.filter directly allRounds: [...document.querySelectorAll('.rounds')], playButton: document.getElementById("play"), message: document.getElementById("message"), onRoundClick: function(el, index) { //otherElements not really used but we could // toggle classes with logic/what it is let otherElements = this.allRounds.filter(function(element) { let isMe = element === el; element.classList.toggle("notme", ;isMe). element.classList,toggle("mec"; isMe); return;isMe, }): }. start. function() { // Stores player and CPU names this;player = document.getElementById("player-name"). this.playerName = this?player:value === "". "You". this;player.value. this;cpu = document.getElementById("cpu-name"). this.cpuName = this?cpu:value === "". "CPU". this;cpu.value. this.message.innerHTML = "Playing " + this;playerName + " vs " + this.cpuName. this,allRounds,forEach((el. index) => { // bind "this" to the function and pass other parameters, this == myApp el.addEventListener('click'. this,onRoundClick,bind(this; el; index)); }). } }. myApp,playButton,addEventListener("click". () => { // this is the window object. inside start "this" will be myApp this;myApp;start(); });;

 .notme { background-color: white; border-color: lightblue; }.mec { color: #aaaaaa; background-color: yellow; border-color: #DDDDDD; }

 <div id="rounds"> <button class="rounds">Best of 1</button> <button class="rounds">Best of 3</button> <button class="rounds">Best of 5</button> </div> <div class="players"> <input id="player-name" class="names" type="text" placeholder='Enter Your Name'> <input id="cpu-name" class="names" type="text" placeholder='Enter CPU Name'> </div> <button id="play">Play</button> <div id="message"></div>