是否可以使用回调 function 将单击事件中的按钮值存储在全局变量上？

Question

I'm trying to store the value from one of three buttons in a variable called " playerScore ", so it can be compared to another variable. However, the code below is returning "undefined" instead of the actual value of the button clicked by the user.

I'm using a callback function in order to retrieve the value from the click event. If I simply console.log the event, it runs . However if I try to store it in the global variable "playerScore" and then console.log it, it doesn't.

I'm sure there's a better and simpler way to do it, but I'm out of ideas. Any help is highly appreciated.

If I run the code below, the function returns " undefined ":

// Gets player choice from button click (iterates nodelist of buttons)
let playerChoice;
function getPlayerChoice() {
    const playerButtons = document.querySelectorAll(".btn");
    for (i of playerButtons) {
        (function(i) {
            i.addEventListener('click', function() {
              playerChoice = i.innerText;
            });
        })(i);     
    }
    console.log(playerChoice);
}

If I run the code below, it works and console logs the value of the button click:

function getPlayerChoice() {
    const playerButtons = document.querySelectorAll(".btn");
    for (i of playerButtons) {
        (playerChoice = function(i) {
            i.addEventListener('click', function() {
                console.log(i.innerText);
            });
        })(i);     
    }
}

The getPlayerChoice() function gets called in the following function:

function playRound(playerSelection, computerSelection) {

    // Gets player and computer choices
    playerSelection = getPlayerChoice();
    computerSelection = getComputerChoice();
}

Answer 1

In your first example, the console.log is being evaluated before any button is pressed, and will therefore print undefined .

To print a meaningful value, the logging of the choice must occur after a button press, like so:

 let playerChoice; function bindEventListeners() { const btns = document.querySelectorAll(".btn"); for (var i of btns) { (function(i) { i.addEventListener('click', function() { playerChoice = i.innerText; logChoice(); }); })(i); } } function logChoice() { console.log(playerChoice); } bindEventListeners();

 <button class="btn">one</button> <button class="btn">two</button>

Answer 2

Console.log() after you pressed the button, not before that

 function getPlayerChoice() { let playerChoice; const playerButtons = document.querySelectorAll(".btn");//get all buttons elements playerButtons.forEach((button) => { button.addEventListener('click', () => { //this code runs after you press a button playerChoice = button.innerText; console.log(playerChoice); }); }); } getPlayerChoice();//call function once, not on every button press

 <button class="btn">button1</button> <button class="btn">button2</button> <button class="btn">button3</button> <button class="btn">button4</button> <button class="btn">button5</button>

Answer 3

You don't see the playerChoice because you print it before a button is pressed. Split the function into two parts:

• one to add event listeners to the buttons
• one to get the playerChoice value

 const playerButtons = document.querySelectorAll(".btn"); const getScoreButton = document.getElementById("getScore"); let playerChoice; playerButtons.forEach(function(elem) { elem.addEventListener("click", function() { playerChoice = this.innerText; console.log('click:', playerChoice); }); }); getScoreButton.addEventListener("click", function() { console.log('get playerChoice:', playerChoice); });

 <button class="btn">Alpha</button> <button class="btn">Beta</button> <button class="btn">Gamma</button> <button class="btn">Delta</button> <br /> <br /> <button id="getScore">Get score</button> <span></span>