Adding DOM to Rock Paper Scissors

Hi everyone,
I feel like I’m failing to understand something simple.

I’m currently working on DOM manipulation for the Rock Paper Scissors game. So far, I can successfully create one round of my game if playerSelection is defined by one of my choices (you’ll see it is currently defined as “rock”) in the code. Obviously, I’d like my playerSelection to be made via clicking a button. The buttons and the event listener work. How do I make a function so that my playerSelection reacts to one of three buttons being clicked?

Thank you so much for your help,
Morgan

This is my js code so far:

const container = document.querySelector("#container");

const buttons = document.querySelectorAll(“button”);
buttons.forEach((button) => {
button.addEventListener(“click”, (e) => {
return(button.id);
});
});

let playerSelection = “rock”
let computerSelection = computerPlay();
let playerScore = 0;
let computerScore = 0;

function computerPlay() {
let randSelector = Math.floor(Math.random()*3 + 1);
if (randSelector == 1) return “rock”
if (randSelector == 2) return “paper”
else return “scissors”;
}

function game() {

playRound();
alert(playRound(playerSelection, computerSelection));

function playRound(playerSelection, computerSelection) {

if (playerSelection == “rock” && computerSelection == “scissors”) {
playerScore++;
return (“You win! Rock beats scissors :D”);
}
else if (playerSelection == “rock” && computerSelection == “paper”) {
computerScore++;
return (“You lose! Paper beats rock :(”);
}
else if (playerSelection == “paper” && computerSelection == “rock”) {
playerScore++;
return (“You win! Paper beats rock :D”);
}
else if (playerSelection == “paper” && computerSelection == “scissors”) {
computerScore++;
return (“You lose! Scissors beats paper :(”);
}
else if (playerSelection == “scissors” && computerSelection == “paper”) {
playerScore++;
return (“You win! Scissors beats paper :D”);
}
else if (playerSelection == “scissors” && computerSelection == “rock”) {
computerScore++;
return (“You lose! Rock beats scissors :(”);
}
else if (playerSelection == “scissors” && computerSelection == “scissors”) {
return (“It’s a tie - womp womp.”);
}
else if (playerSelection == “paper” && computerSelection == “paper”) {
return (“It’s a tie - womp womp.”);
}
else (playerSelection == “rock” && computerSelection == “rock”)
return (“It’s a tie - womp womp.”);
}

}

game();

const score = document.querySelector("#score");
score.classList.add(“score”);
score.textContent = (You chose ${playerSelection} and the computer chose ${computerSelection}. The current score is--- player: ${playerScore}, computer: ${computerScore}!);

You need to do any work related to playing a round in the button event listener. You can’t simply return something from there and access that elsewhere in your code. The code outside of an event listener is evaluated long before the callback function is ever called.

I’ve posted questions in this forum twice and you have helped me twice. It’s much appreciated. Thanks Austin!
Morgan

No problem. Our chatrooms are a great place to get some help live as you encounter a problem too if you don’t want to wait for an answer on here.