Rock Paper Scissors Game compare values


#1

Hi everyone,
This is my very first coding related forum post ever. I am terribly stuck on the Rock Paper Scissors Game (DOM Manipulation).
While the functions to make choices works, the last function playRound doesn’t. I’m getting an “undefined” in the console and I don’t know why.

Before I stored playRound in a variable, I had just called the function at the end and instead of returning the values, I tried console.log. But that didn’t work either. Nothing logged to console, but also no error message.
I hope someone has an idea to clear this up. I can’t wrap my mind around it.
Sorry for the long code, I am not sure which parts are relevant to answer the question.

const container = document.querySelector('.container');
const playerChoice = document.getElementById('playerChoice');

let  playerSelection = function () {
  if (event.target.matches('#rock')) {
    playerChoice.textContent += " Rock";   
     return "rock";
   
}
if (event.target.matches('#paper')) {
  playerChoice.textContent +=  " Paper" ;
  return "paper";
  
}
if (event.target.matches('#scissors')) {
  playerChoice.textContent +=  " Scissors" ;
  return "scissors";
 
}
}

//Function to get random string (rock, paper or scissors) (Computer)
function computerPlay () { 
  let items = ["rock", "paper", "scissors"];
      return (items[Math.floor(Math.random()*items.length)]);
 }

 //insert Choice in HTML
let computer = computerPlay();   
const computerChoice = document.querySelector('#computerChoice');

let computerSelection = function () {   
    
    if (computer === "paper") {
        computerChoice.textContent += " Paper";
        return "paper";
      }

    else if (computer === "rock") {
        computerChoice.textContent += " Rock";
        return "rock" ;
    }

    else if (computer === "scissors") {
       computerChoice.textContent += " Scissors";
       return "scissors";
   }
  }
  
  
  //fire function when user clicks button of choice
  



// //Function to play one Round 
let playRound = function(choice1, choice2) {
        
  if (choice1 === "rock"){
      if(choice2 === "paper"){
        return 1;
    } 
    

  else if (choice2 === "scissors") {
      return 2; 
    } 
  }

  if (choice1 === "paper") {

     if (choice2 === "rock") {
      return 2;
    } 

     else if (choice2 === "scissors") {
      return 1;
    }
  }
  
 
  else if (choice1 === "scissors") {
    if (choice2 === "rock") {
      return 1;
    }

    else if (choice2 === "paper") {
    return 2;  
   }
   }
  }

let result = playRound(playerSelection, computerSelection);      

container.addEventListener('click', playerSelection, {once: true });
container.addEventListener('click', computerSelection, {once: true}); 
console.log(result); ```

#2

Hi @niconacht

congratulations on your first post.

There’s a couple of issues with your code.

let  playerSelection = function () {
  if (event.target.matches('#rock')) {
    playerChoice.textContent += " Rock";   
     return "rock";

In the above code you reference event. You should therefore pass that argument into your function.
let playerSelection = function (event) {

let result = playRound(playerSelection, computerSelection);
This doesn’t do anything. playerSelection and computerSelection are functions and therefore you need parens to actually call the function
let result = playRound(playerSelection(), computerSelection());

However the big issue here is that you actually only want the playRound function to run after the player has clicked a button.

What I would do is add one event listener (or one event listener to each button) and from that call one function that gets the playerSelection, gets the computerSelection and then processes it.

So you could do something like

let playRound = function(event) {
  let choice1 = playerSelection(event) // remember to add event to the playerSelection function as I advised above
  let choice2 = computerPlay()
  computerSelection(choice2) // you will also need to add this variable into the computerSelection function: let computerSelection = function (computer) {
        
  if (choice1 === "rock"){
      if(choice2 === "paper"){
        return 1;
    } 
    

  else if (choice2 === "scissors") {
      return 2; 
    } 
  }

  if (choice1 === "paper") {

     if (choice2 === "rock") {
      return 2;
    } 

     else if (choice2 === "scissors") {
      return 1;
    }
  }
  
 
  else if (choice1 === "scissors") {
    if (choice2 === "rock") {
      return 1;
    }

    else if (choice2 === "paper") {
    return 2;  
   }
   }
  }

container.addEventListener('click', playRound, {once: true });

Hope that helps.


#3

@CouchofTomato Thank you so much, it works now! When to pass parameters in functions is sometimes not obvious to me , I’m gonna go through your code now to understand it and go on :slight_smile:
Thanks again!


#4

Well mostly, if you need to access those parameters in the function (and they aren’t global variables) you’ll need to name them.

The only one I didn’t need to pass in was event that is because when you have an event listener, the function it calls is passed in the event object implicitly. All you need to do is when you write the function that the event listener calls, in this case it’s playRound you just need to name the event parameter there so you can reference it inside the function.


#5

Thank you so much, that’s exactly the explanation I needed to clear things up !