how can i get what is being assigned to a variable with textContent to act as an argument for my player input in javascript?

Question

i'm currently working on a javascript project where i create an ui for my rock, paper, scissors game which as of now only plays in the console and takes the player input for a prompt.

so far, i've created three buttons(one for rock, paper, and scissors). i've added an event listener to those buttons that listen for a click. i've also assigned that button.textContent to a variable buttonText in that event listener function. outside of that event listener function, i've declared the variable buttonText in the global scope and left it blank. in my playRound function that looks for two arguments(computerSelection and playerSelection), i've assigned buttonText to the playerSelection argument.

i'm not sure if what i did is correct and i'm just not calling my game to run correctly or if i need to rethink how to assign my playerSelection to be what is outputting for my button.textContent.

i have commented out parts of my code as my current assignment says "For now, remove the logic that plays exactly five rounds." until i get my core function to work before adding it back in.

this is my javascript code:

// DECLARES THE CHOICES FOR ANSWERS, PLAYER SCORE, COMPUTER SCORE, AND SETS BOTH SCORES TO 0.
const choices = ['rock', 'paper', 'scissors'];
let playerScore = 0;
let computerScore = 0;

// FUNCTION TO RANDOMIZE THE ANSWER FOR computerSelection.
function computerPlay() {
    return choices[~~(Math.random() * choices.length)]
} 

// DECLARES VARIABLE FOR BUTTONTEXT, PLAYER SELECTION, AND COMPUTER SELECTION IN THE GLOBAL SCOPE.
let buttonText = '';
let playerSelection = '';
let computerSelection = computerPlay();

// FUNCTION THAT PLAYS A ROUND, CHECKS ANSWERS TO SEE WHO WON THE ROUND, AND RETURNS A MESSAGE-
// -STATING WHO WON THE ROUND.
function playRound(playerSelection, computerSelection) {
    // playerSelection = prompt('rock, paper, or scissors?').toLowerCase();
    playerSelection = buttonText;
    computerSelection = computerPlay();

    if (playerSelection === computerSelection) {
        return 'you tied';
    } else if (computerSelection === 'paper' && playerSelection === 'rock') {
        computerScore++;
        return 'you lose, paper beats rock! ):';
    } else if (computerSelection === 'scissors' && playerSelection === 'paper') {
        computerScore++;
        return 'you lose, scissors beats paper! ):';
    } else if (computerSelection === 'rock' && playerSelection === 'scissors') {
        computerScore++;
        return 'you lose, rock beats scissors! ):';
    } else if (computerSelection === 'rock' && playerSelection === 'paper') {
        playerScore++;
        return 'you win, paper beats rock! (:';
    } else if (computerSelection === 'paper' && playerSelection === 'scissors') {
        playerScore++;
        return 'you win, scissors beats paper! (:';
    } else if (computerSelection === 'scissors' && playerSelection === 'rock') {
        playerScore++;
        return 'you win, rock beats scissors! (:';
    } else {
        return 'that\'s not an acceptable answer!'
    }
}

const buttons = document.querySelectorAll('button');

buttons.forEach((button) => {
    button.addEventListener('click', () => {
        let buttonText = button.textContent;
        console.log(buttonText);
    })
})

// LOGIC THAT PLAYS 5 ROUNDS OF THE GAME
// function game() {
//     console.log(playRound(playerSelection, computerSelection));
//     if (playerScore < 5 && computerScore < 5) {
//         game();
//      } else {
//          endGame();
//      }
// }


// FUNCTION THAT ENDS THE GAME AND DECLARES THE WINNER
// function endGame() {
//     if (playerScore > computerScore) {
//     console.log('you win! (:') 
//     } else if (computerScore > playerScore) {
//     console.log('you lose! ):');
//     }
// }

// console.log(buttonText);

playRound(playerSelection, computerSelection);
console.log(playRound(playerSelection, computerSelection));

// CALLS THE FUNCTION TO PLAY THE GAME
// game();

here is the code for my html's body that contains my buttons:

<body>
    <button id="rock">rock</button>
    <button id="paper">paper</button>
    <button id="scissors">scissors</button>

    <script src="index.js"></script>
</body>

Answer 1

You can use the event from the eventListener to know which button was clicked.

button.addEventListener('click', (event) => {
    let buttonText = event.target.textContent;
    console.log(buttonText);
})