call function from if/else statement

I'm working on triggering a function within an event listener I have set up using an if/else statement.

The winChecker function takes the first element in each array and runs through an if/else statement to determine the winner. I can call the function in the console and it returns the expected result, but for some reason I can't get that function to trigger after the player makes their selection. I've tried several different things, and out of what I've written so far this is what I'm most confident in:

    var playerSelection = [];
    var cpuPlayer = [];
    function playerChoice() {               
        let button = document.getElementsByClassName('game-piece')
        let rockButton = document.querySelector('#rock-button')
        let paperButton = document.querySelector('#paper-button')
        let scissorsButton = document.querySelector('#scissors-button')     
        if (button[0].addEventListener('click', (e) => {
            playerSelection.push('Rock')
            console.log(playerSelection[0] + ' was chosen by the player and ' + cpuPlayer + ' was chosen by the CPU.')
            return winChecker();
        })) {}
        else if(button[1].addEventListener('click', (e) => {
            playerSelection.push('Paper')
            console.log(playerSelection[0] + ' was chosen by the player and ' + cpuPlayer + ' was chosen by the CPU.')
            return winChecker();
        })) {}
        else if(button[2].addEventListener('click', (e) => {
            playerSelection.push('Scissors')
            console.log(playerSelection[0] + ' was chosen by the player and ' + cpuPlayer + ' was chosen by the CPU.')
            return winChecker();
        })) {}
     }

I have a separate function that has an event listener on a start button, and I've been able to trigger the playerChoice function properly by doing that. I'm not certain if there's something off in my syntax, or if there's a different reason why the winChecker function won't return in the event listener. I greatly appreciate any feedback anybody can provide.

Thanks!

Here's an answer with minimal changes:

function start() {               
  let button = document.getElementsByClassName('game-piece');
  let rockButton = document.querySelector('#rock-button');
  let paperButton = document.querySelector('#paper-button');
  let scissorsButton = document.querySelector('#scissors-button');     
  button[0].addEventListener('click', (e) => {
      playerSelection.push('Rock');
      console.log(playerSelection[playerSelection.length - 1] + ' was chosen by the player and ' + cpuPlayer + ' was chosen by the CPU.');
      playerDidChoose();
  });
  button[1].addEventListener('click', (e) => {
      playerSelection.push('Paper');
      console.log(playerSelection[playerSelection.length - 1] + ' was chosen by the player and ' + cpuPlayer + ' was chosen by the CPU.');
      playerDidChoose();
  });
  button[2].addEventListener('click', (e) => {
      playerSelection.push('Scissors');
      console.log(playerSelection[playerSelection.length - 1] + ' was chosen by the player and ' + cpuPlayer + ' was chosen by the CPU.');
      playerDidChoose();
  });
}

function playerDidChoose() {
  var result = winChecker();
  // ...
}

Changes made:

  • Rename playerChoice to start so you only addEventListener once.
  • Remove if and else if wrapping as that is logically incorrect.
  • Change playerSelection[0] to playerSelection[playerSelection.length - 1] for last.
  • Add playerDidChoose handler.

Usage:

  • Bind start to your start button.
  • Handle player choice in playerDidChoose.

Refactoring

Here's a cleaner implementation:

function start() {
  let rockButton = document.querySelector('#rock-button');
  let paperButton = document.querySelector('#paper-button');
  let scissorsButton = document.querySelector('#scissors-button');     
  rockButton.addEventListener('click', (e) => {
      playerDidChoose('Rock');
  });
  paperButton.addEventListener('click', (e) => {
      playerDidChoose('Paper');
  });
  scissorsButton.addEventListener('click', (e) => {
      playerDidChoose('Scissors');
  });
}

function playerDidChoose(choice) {
  playerSelection.push(choice);
  console.log(choice + ' was chosen by the player and ' + cpuPlayer + ' was chosen by the CPU.');

  var result = winChecker();
  // ...
}

Usage:

// No change!