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

Question

I want to have the user click a button to choose 'rock' 'paper' or 'scissors'. I have rock, paper and scissors set as the id for the buttons. I want to capture the id upon button click and run that value through a function. The value will serve as the users choice of rock, paper or scissors.

I then want to print the results of the game in a new div on the page.

I've declared gameResult globally but it seems like it is acting as if it's a local variable for the array function shown below.

I try assign it the result of playRound(e.target.id) and when I console.log(gameResult) within the function it shows the correct result.

However when I use gameResult outside of the function, it shows that it is an empty string as if the value was never assigned.

How can I assign the result of playRound(e.target.id) to a variable to then be used later in this code?

I can work around this by adding the 'creating results div' block of code into the function, but honestly it looks incredibly messy when arranged that way.

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

I'm a little confused by your question, but why not just move the code that handles the result into the event handler? The event handler is just that - it handles the code that should run when your event is triggered, so there's no reason to not include any code that updates the UI based on the button that got clicked.

 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>