I am new to JS, trying to build a simple rock paper scissors game where the user can make their selection through buttons, and then the results of the game are logged to the console. However, I am not getting any kind of result when i click my buttons. I am sure i am overlooking something simple, again I am new to JS and would appreciate any feedback.

my code:

let compChoice = Math.random();

function getComputerChoice() {
   
   if (compChoice < 0.34){
        compChoice = "rock";
   }
   else if (compChoice <= 0.67) {
        compChoice = "paper";
   }
   else {
        compChoice = "scissors";
   }
}

getComputerChoice();
let gameResult = "tie";

document.getElementById("rock").addEventListener("click", rockRound);
function rockRound(userChoice, compChoice)
{
    userChoice = "rock";
    if (compChoice === "rock") {
        console.log(gameResult);
        }
    else if (compChoice === "scissors"){
        gameResult = "User wins! Rock beats scissors.";
        console.log(gameResult);
        }
    else if (compChoice === "paper") {
        gameResult = "User lost. Paper beats rock.";
        console.log(gameResult);
        }
}

document.getElementById("paper").addEventListener("click", paperRound);
function paperRound(userChoice, compChoice) 
{
    userChoice = "paper";
    if (compChoice === "paper") {
        console.log(gameResult);
    }
    if (compChoice === "scissors") {
        gameResult = "User lost. Scissors beats paper."
        console.log(gameResult);
    }
    if (compChoice === "rock") {
        gameResult = "User wins! Paper beats rock."
        console.log(gameResult);
    }
}

document.getElementById("scissors").addEventListener("click", scissorsRound);
function scissorsRound(userChoice, compChoice)
{
    userChoice = "scissors";
    if (compChoice === "scissors") {
        console.log(gameResult)
    }
    if (compChoice === "rock") {
        gameResult = "User lost. Rock beats scissors."
        console.log(gameResult);
    }
    if (compChoice === "paper") {
        gameResult = "User wins! Paper beats rock."
        console.log(gameResult);
    }

}

CodePudding user response：

Simple fix.

Change

addEventListener("click", paperRound, compChoice);

to

addEventListener("click", paperRound);

Also do that for scissors and rock event handlers.

Snippet

let compChoice = Math.random();

function getComputerChoice() {
   
   if (compChoice < 0.34){
        compChoice = "rock";
   }
   else if (compChoice <= 0.67) {
        compChoice = "paper";
   }
   else {
        compChoice = "scissors";
   }
}

getComputerChoice();
let gameResult = "tie";

document.getElementById("rock").addEventListener("click", rockRound);
function rockRound(userChoice)
{

    userChoice = "rock";
    if (compChoice === "rock") {
        console.log(gameResult);
        }
    else if (compChoice === "scissors"){
        gameResult = "User wins! Rock beats scissors.";
        console.log(gameResult);
        }
    else if (compChoice === "paper") {
        gameResult = "User lost. Paper beats rock.";
        console.log(gameResult);
        }
}

document.getElementById("paper").addEventListener("click", paperRound);
function paperRound(userChoice) 
{
    console.log('tp', compChoice);
    
    userChoice = "paper";
    if (compChoice === "paper") {
        console.log(gameResult);
    }
    if (compChoice === "scissors") {
        gameResult = "User lost. Scissors beats paper."
        console.log(gameResult);
    }
    if (compChoice === "rock") {
        gameResult = "User wins! Paper beats rock."
        console.log(gameResult);
    }
}

document.getElementById("scissors").addEventListener("click", scissorsRound);
function scissorsRound(userChoice)
{
    userChoice = "scissors";
    if (compChoice === "scissors") {
        console.log(gameResult)
    }
    if (compChoice === "rock") {
        gameResult = "User lost. Rock beats scissors."
        console.log(gameResult);
    }
    if (compChoice === "paper") {
        gameResult = "User wins! Paper beats rock."
        console.log(gameResult);
    }

}

<button id="rock">Rock</button>
<button id="scissors">Scissors</button>
<button id="paper">Paper</button>

CodePudding user response：

When you add an event listener, the callback function is given the 'event' passed as the argument. You will typically see this marked as 'e' or 'event' like this:

document.addEventListener("click",someFunc);

function someFunc(e){
   console.log(e.clientX);
}

Depending on the type of event, the 'e' variable will hold relevant data like the target or the position of the mouse or the key being pressed.

What you're doing is trying to access variables passed as arguments that simply don't exist.

to confirm this you can try console logging userChoice at the top of any of your callbacks and you should see the event object in your dev tools.

I would suggest finding the compChoice inside of the callbacks, and not worrying about declaring userChoice- as the user is making the choice depending on the which event is fired anyway.

function getComputerChoice() {
   return ['rock','paper','scissors'][~~(Math.random()*3)];

}

document.getElementById("paper").addEventListener("click", paperRound);
function paperRound(e) 
{
    let compChoice = getComputerChoice();
    if (compChoice === "paper") {
        // tie, this is the paper event
    }
    if (compChoice === "scissors") {
        gameResult = "User lost. Scissors beats paper."
        console.log(gameResult);
    }
    if (compChoice === "rock") {
        gameResult = "User wins! Paper beats rock."
        console.log(gameResult);
    }
}

You can implement this however you'd like, just remember by declaring the name of a variable as the argument of a function, you lose access to the value of that variable outside of the scope of that function (this is referred to as shadowing).

let somevar = 10;
function shadowed(somevar){
   console.log(somevar); //will be whatever is passed into `shadowed()` when called, not 10
}