Goal

My goal is to complete a game of rock, paper, scissors. I need to compare the input of two players that are behind the same computer, a simple game. The two players give their input through the buttons on an HTML page (rock, paper or scissor) that have an EventListener on them thanks to a JavaScript file I made.

Problem

Update: after feedback from others, I declared let variables outside the function. This gives me a new problem: I end up with two empty variables. Does anyone know how I solve this issue?

 const options = document.querySelectorAll(".options");
        var timesClicked = 0;

        console.log(options);

        let playerOneInput = "";
        let playerTwoInput = "";

        options.forEach((option) => {
            option.addEventListener("click", function () {
                timesClicked  ;
                console.log(timesClicked);

                if (timesClicked == 1) {
                    let playerOneInput = this.textContent;
                    document.getElementById("player").innerHTML = "Player 2, choose your option!"
                } else {
                    let playerTwoInput = this.textContent; 
                };
                
                console.log(playerOneInput);
                console.log(playerTwoInput);

                if (timesClicked == 2) {
                    compareInputs(playerOneInput, playerTwoInput);
                }

            });
            
        });

<h1 id='player'>Player 1, choose your option!</h1>
<button class="options">Rock</button>
<button class="options">Paper</button>
<button class="options">Scissors</button>
<h1>
  <div id='result'><div>
</h1>

I excluded the rest of my JS code which is the compareInputs function and result printing. Please let me know if you would like to see it. Thanks in advance!

CodePudding user response：

As explained here you'd better go with a game of indexes.

• Use a variable to count the number of turns let turns
• Use turns % 2 to detect which player played
• Use buttons with value="N" where N are also indexes 0, 1, 2
• The winner logic: result = PL1 === PL2 ? 2 : (PL2 1) % 3 === PL1 ? 0 : 1;
• Show the new title only once you increment the turn turns = 1 and that piece of logic should go last!

const ELS_options = document.querySelectorAll(".options");
const EL_title    = document.querySelector("#title");
const EL_result   = document.querySelector("#result");

let turns = 0; // 0 to N
const cards = ["Rock", "Paper", "Scissors"]; // Values: 0,1,2
const names = ["One", "Two"];
const resultTexts = [
  `Player ${names[0]} won!`,
  `Player ${names[1]} won!`,
  `It's a draw!`
 ];
const moves = [[], []]; // 0 is for PL1, 1 is for PL2

const showResult = () => {
  const player = turns % 2; // 0,1,0,1,...
  if (player === 0) return EL_result.textContent = "";
  // Else....
  const round = Math.floor(turns / 2);
  // Collect both player moves
  const PL1 = moves[0][round];
  const PL2 = moves[1][round];
  // Get the result: //stackoverflow.com/a/53983473/383904
  const result = PL1 === PL2 ? 2 : (PL2   1) % 3 === PL1 ? 0 : 1;
  EL_result.innerHTML = `
    <div>Player ${names[0]} played: ${cards[PL1]}</div>
    <div>Player ${names[1]} played: ${cards[PL2]}</div>
    <h1>${resultTexts[result]}</h1>
  `;
};

const showTitle = () => {
  const player = turns % 2; // 0,1,0,1,...
  EL_title.textContent = `Player ${names[player]}, choose your move!`;
};

const onSelect = (evt) => {
  const player = turns % 2; // 0,1,0,1,...
  const move = parseInt(evt.currentTarget.value, 10); // 0,1,2
  moves[player].push(move); // Store the move
  showResult();
  turns  = 1; // Advance turn
  showTitle(); 
};

// INIT APP:
ELS_options.forEach(EL => EL.addEventListener("click", onSelect));
showTitle();

<h2 id='title'></h2>
<button value="0" class="options" type="button">Rock</button>
<button value="1" class="options" type="button">Paper</button>
<button value="2" class="options" type="button">Scissors</button>
<div id='result'></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The variable is undefined because you create it inside a function. Try declaring the variable outside the function and changing this global variable inside the function

let inputPlayer1 = "";

function onInput() {
  inputPlayer1 = "rock"; // the selected type
}