JavaScript没有存储HTML输入值

Question

我正在用HTML、CSS和JS制作一个石头剪刀游戏。我给用户两个输入，他们可以在其中输入自己的名称和CPU的名称。然后当他们点击播放时，我可以存储这些值。到目前为止，我将它们登录到控制台，看看它是否有效。然而，尽管我输入了一些内容，但输入值始终为空。如有任何帮助，我们将不胜感激：(

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

您应该在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>

Answer 2

试试这个，

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>