JavaScript没有存储HTML输入值

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

let playerName=document.getElementById（“播放器名称”）.value；
让cpuName=document.getElementById（“cpu名称”）.value；
如果（播放名称===“”）{
playerName=“你”；
}
如果（cpuName==“”）{
cpuName=“CPU”；
}
让play=document.getElementById（“play”）.addEventListener（“单击”，（）=>{
console.log（playerName，cpuName）；
});

播放
在单击事件时，您应该获得这些值：


let play=document.getElementById（“play”）.addEventListener（“单击”），（）=>{
让playerName=document.getElementById（“播放器名称”）.value；
让cpuName=document.getElementById（“cpu名称”）.value；
如果（播放名称===“”）{
playerName=“你”；
}
如果（cpuName==“”）{
cpuName=“CPU”；
}  
console.log（playerName，cpuName）；
});

播放
试试这个


let playerName；
让联塞特派团；
让play=document.getElementById（“play”）.addEventListener（“单击”，（）=>{
playerName=document.getElementById（“播放器名称”）.value；
cpuName=document.getElementById（“cpu名称”）.value；
if（playerName==null）{
playerName=“你”；
}
如果（cpuName==null）{
cpuName=“CPU”；
}  
console.log（playerName，cpuName）；
});

播放
，除了console.log（）行，JS代码在页面加载时运行，输入仍然为空。类似于
let playerName=document.getElementById（“玩家名称”）.value的赋值不会将变量永久绑定到.value；它只运行一次，将来不会有任何影响。有没有办法将变量永久绑定到.value？只有使用Angular或React这样的框架，基本上都是围绕这个概念构建的。@JoshuaLiu您可以在对象上定义getter，但是您应该只获取单击处理程序中的值。您应该将该值移动到事件处理程序中。不需要角度或反应