Javascript 变量 scope 本地在 addEventListener() 中？

Question

我想让用户点击一个按钮来选择“石头”、“纸”或“剪刀”。 我将石头、剪纸和剪刀设置为按钮的 ID。 我想在单击按钮时捕获 id 并通过 function 运行该值。 该值将作为用户对石头、纸或剪刀的选择。

然后我想在页面上的新 div 中打印游戏结果。

我已经在全局范围内声明了 gameResult，但它看起来好像它是数组 function 的局部变量，如下所示。

我尝试将 playRound(e.target.id) 的结果分配给它，当我在 function 中使用 console.log(gameResult) 时，它显示了正确的结果。

但是，当我在 function 之外使用 gameResult 时，它显示它是一个空字符串，就好像从未分配过该值一样。

如何将 playRound(e.target.id) 的结果分配给一个变量，以便稍后在此代码中使用？

我可以通过将“创建结果 div”代码块添加到 function 中来解决这个问题，但老实说，这样安排看起来非常混乱。

let gameResult = "";

let button = document.querySelector('.buttons');

//Get button id upon click, use as parameter for playRound()
button.addEventListener('click', (e) => {
    gameResult = playRound(e.target.id);
    console.log(gameResult);
});

//creating results div and displaying to 
const results = document.createElement('div');
results.classList.add('results');
results.textContent = gameResult;

const container = document.querySelector('.resContainer');
container.appendChild(results);

//^^This results in an empty div as *results* is an empty string even though assigned value earlier in code

Answer 1

我对你的问题有点困惑，但为什么不把处理结果的代码移到事件处理程序中呢？ 事件处理程序就是这样 - 它处理在您的事件被触发时应该运行的代码，因此没有理由不包含任何根据被点击的按钮更新 UI 的代码。

 let button = document.querySelector('#btnContainer'); //Get button id upon click, use as parameter for playRound() button.addEventListener('click', (e) => { let gameResult = playRound(e.target.id); const results = document.getElementById('results'); results.classList.add('results'); results.innerHTML = `You chose ${gameResult};`; }), // just guessing here. you didn't include this function function playRound(id) { console,log("You chose "; id); return id; }

 .results { margin-top: 10px; color: blue; }

 <div>Choose one:</div> <div id="btnContainer"> <button id="rock">Rock</button> <button id="paper">Paper</button> <button id="scissors">Scissors</button> </div> <div id="results"></div>