时间戳

首页 > 解决方案 > 用 let 声明的变量不改变

javascript - 用 let 声明的变量不改变

问题描述

我正在制作一个游戏，用户可以给自己和 CPU 一个用户名。当播放器点击“播放”时，用户名应该被存储并显示在下一页上。然而，什么也没有出现。任何帮助将不胜感激 ：）

注意：我认为这可能与变量的范围有关，因为我使用了“let”。

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

    // Moves from homepage to game page
    document.getElementById("homepage").style.display = "none";
    document.getElementById("game").style.display = "block";
    // Calls game loop
    gameLoop();
     
});

let playerScore = 0;
let cpuScore = 0;
function gameLoop() {
    document.getElementById("player-name-score").textContent = `${playerName}: ${playerScore}`;
    document.getElementById("cpu-name-score").textContent = `${cpuName}: ${cpuScore}`;
}
#game {
  display: none;
}
<div id="homepage">
    <input id="player-name-input" class="names" type="text" placeholder='Enter Your Name'>
    <input id="cpu-name-input" class="names" type="text" placeholder='Enter CPU Name'>
    <button id="play">Play</button>
</div>

<div id="game">
    <h3 id="player-name-score"></h3>
    <h3 id="cpu-name-score"></h3>   
</div>

标签： javascripthtml

解决方案

当然是范围问题。

// Calls game loop
    gameLoop(playerName, cpuName);

function gameLoop(player, cpu) {
  document.getElementById("score").textContent += `${wins * 2 - 1}`;
  console.log(player, cpu)
}

推荐阅读