JavaScript не сохраняет HTML входное значение

Question

Я делаю игру «Камень-ножницы-бумага» с HTML, CSS и JS. Я даю пользователю два входа, где он может ввести свое имя и имя процессора. Затем, когда они нажимают кнопку воспроизведения, я могу сохранить эти значения. На данный момент я регистрирую их в консоли, чтобы посмотреть, работает ли это. Однако входное значение всегда пусто, несмотря на то, что я что-то ввожу. Любая помощь будет принята с благодарностью :)

let playerName = document.getElementById("player-name").value;
let cpuName = document.getElementById("cpu-name").value;
if (playerName === "") {
    playerName = "You";
}
if (cpuName === "") {
    cpuName = "CPU";
}

let play = document.getElementById("play").addEventListener("click", () => {
    console.log(playerName, cpuName);
});

    <input id="player-name" class="names" type="text" placeholder='Enter Your Name'>
    <input id="cpu-name" class="names" type="text" placeholder='Enter CPU Name'>
    <button id="play">Play</button>

Answer 1

Попробуйте это,

let playerName;
let cpuName;

let play = document.getElementById("play").addEventListener("click", () => {
playerName = document.getElementById("player-name").value;
cpuName = document.getElementById("cpu-name").value; 
if (playerName == null) {
 playerName = "You";
}
if (cpuName == null) {
 cpuName = "CPU";
}  
console.log(playerName, cpuName);
});

    <input value="" id="player-name" class="names" type="text" placeholder='Enter Your Name'>
    <input value="" id="cpu-name" class="names" type="text" placeholder='Enter CPU Name'>
    <button id="play">Play</button>

Answer 2

Вы должны получить это значение во время события onclick:

let play = document.getElementById("play").addEventListener("click", () => {
   let playerName = document.getElementById("player-name").value;
   let cpuName = document.getElementById("cpu-name").value; 
   if (playerName === "") {
     playerName = "You";
   }
   if (cpuName === "") {
     cpuName = "CPU";
   }  
   console.log(playerName, cpuName);
});

    <input id="player-name" class="names" type="text" placeholder='Enter Your Name'>
    <input id="cpu-name" class="names" type="text" placeholder='Enter CPU Name'>
    <button id="play">Play</button>