0
228
ViewsRock, paper, scissors: empty playerOne and playerTwo variables after function calls using an EventListener(click)?
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!
2 answers
Answer question0
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 % 2to detect which player played - Use buttons with
value="N"whereNare 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 += 1and 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>0
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
}