Variable declared with let not changing

Question

I am making a game where the user can give themself and the CPU a username. When the player clicks "play", the usernames should be stored and displayed on the next page. However, nothing appears. Any help would be greatly appreciated :)

NOTE: I think it might have to do with the scope of the variable because I used "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>

Could you add the minimum amount of HTML needed to reproduce the problem? See [mcve]. — Brian McCutchon, Jul 15 '20 at 19:03
Does this answer your question? [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — Daedalus, Jul 15 '20 at 19:24

score 0 · Accepted Answer · answered Jul 15 '20 at 19:19

0

Of course it's a scope problem.

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

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

answered Jul 15 '20 at 19:19

Abel Recouso González

36
1

Variable declared with let not changing

1 Answers1