Hello, i am currently revisiting a rock paper scissors game in html/css/javascript. Now i am trying to make a corresponding website where you can click the button and it logs your playerChoice in that way. Afterwards its gonna start the game and print winner, rounds etc.. .It seems the playerSelection function is not working correctly. The playerChoice = this.id seems to be working correctly, but the playerSelection function is not console logging anything. I also wonder if i need to change anything in order to take the String out of the function and compare it (see playRound function). If you happen to know something about this please let me know :)
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script defer src="script.js" type="text/javascript"></script>
<title>Rock, Paper, Scissors</title>
</head>
<body>
<h1>Rock, Paper, Scissors</h1>
<p>Play against the computer. First to 5 points wins the game!</p>
<h2>Select a Move:</h2>
<div id="Buttons">
<button id="ROCK">ROCK</button>
<button id="PAPER">PAPER</button>
<button id="SCISSORS">SCISSORS</button>
</div>
<p id="roundTxt"></p>
<h2>Scores:</h2>
<ul id="scoresBox">
<h3>Player: </h3>
<div id="SCORES_HUMAN">0</div>
<h3>Computer: </h3>
<div id="SCORES_COMPUTER">0</div>
</ul>
</body>
</html>
This is my javascript:
document.getElementById("ROCK").onclick = playerSelection;
document.getElementById("PAPER").onclick = playerSelection;
document.getElementById("SCISSORS").onclick = playerSelection;
function getComputerChoice (){
//select Rock Paper or Scissors at random
//return the choice
const PICK = ["Rock", "Paper", "Scissors"];
const random = Math.floor(Math.random() * PICK.length);
return (PICK[random]);
}
function playerSelection() {
//prompt user for their choice
//return the choice
//let playerChoice = prompt("Rock, Paper, or Scissors?");
playerChoice = this.id;
return playerChoice;
}
console.log(playerSelection());
function game() {
//Scoreboard
let SCORES_HUMAN = 0;
let SCORES_COMPUTER = 0;
//for(let i = 0; i<5; i++) {
playRound(playerSelection(), getComputerChoice());
console.log(playRound(playerSelection(), getComputerChoice()));
//}
if(SCORES_HUMAN > SCORES_COMPUTER) {
console.log("You Win!");
} else if(SCORES_HUMAN < SCORES_COMPUTER) {
console.log("You Lose!");
}
console.log("HUMAN: "+ SCORES_HUMAN +" COMPUTER: "+ SCORES_COMPUTER);
function playRound(playerSelection, getComputerChoice) {
//compare playerSelection to getComputerChoice
//return the outcome
if (playerSelection === "ROCK" && getComputerChoice === "Scissors") {
SCORES_HUMAN++;
return "You Win! Rock beats Scissors";
} else if (playerSelection === "ROCK" && getComputerChoice === "Paper") {
SCORES_COMPUTER++;
return "You Lose! Paper beats Rock";
} else if (playerSelection === "PAPER" && getComputerChoice === "Rock") {
SCORES_HUMAN++;
return "You Win! Paper beats Rock";
} else if (playerSelection === "PAPER" && getComputerChoice === "Scissors") {
SCORES_COMPUTER++;
return "You Lose! Scissors beats Paper";
} else if (playerSelection === "SCISSORS" && getComputerChoice === "Paper") {
SCORES_HUMAN++;
return "You Win! Scissors beats Paper";
} else if (playerSelection === "SCISSORS" && getComputerChoice === "Rock") {
SCORES_COMPUTER++;
return "You Lose! Rock beats Scissors";
} else {
return "It's a tie!";
}
}
}
game();
This is my css:
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-left: 50px;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
p {
font-size: 18px;
}
button {
border: .3rem solid rgb(255, 0, 0);
border-radius: .5rem;
margin: .75rem;
font-size: 1rem;
font-weight: bold;
padding: .75rem .5rem;
width: 6rem;
text-align: center;
color: white;
background: rgb(89, 89, 89);
text-shadow: 0 0 .5rem rgb(229, 229, 229);
}
button:hover {
cursor: pointer;
}
button:active {
background-color: rgba(92, 92, 92, 0.208);
}
.Buttones {
flex: display;
align-self: center;
}
I appreciate any help i get and thank you for reading :)
Clicking the rock button (or paper/scissors button) will pass on the string "rock" into the playround function and the game will be played out correctly.
A number of issues with your code.
playRound() twice:playRound(playerSelection(), getComputerChoice());
console.log(playRound(playerSelection(), getComputerChoice()));
I understand that you're trying to see what playRound() is doing, but in actuality this is executing every "round" twice. You already have text statements being returned in playRound(), so either
returns to console.log()s and just call playRound(playerSelection(), getComputerChoice()), ORplayRound() which is not inside the console.log(), and leave playRound() as is.As mentioned by Ahmed above, you are not passing the event of the click but a reference to the function itself. You will need to listen to the event emitted when pressing the button in order to correctly process the player's selection
A minor point, but you mention in the html doc that the first player to 5 wins, however you only allow 5 rounds to be played with your (commented out) for-loop. Instead, use a while-loop like the one below:
while (SCORES_HUMAN < 5 and SCORES_COMPUTER < 5){
playRound(playerSelection(), getComputerChoice());
}
EDIT Updated to include working example of JS code. No associated changes to either HTML or CSS.
function getComputerChoice (){
//select Rock Paper or Scissors at random
//return the choice
const PICK = ["Rock", "Paper", "Scissors"];
const random = Math.floor(Math.random() * PICK.length);
return (PICK[random]);
}
let SCORES_HUMAN = 0;
let SCORES_COMPUTER = 0;
const SCORES_HUMAN_TEXT = document.getElementById("SCORES_HUMAN");
const SCORES_COMPUTER_TEXT = document.getElementById("SCORES_COMPUTER");
const ROCK = document.getElementById("ROCK");
const PAPER = document.getElementById("PAPER");
const SCISSORS = document.getElementById("SCISSORS");
function updateScores() {
SCORES_HUMAN_TEXT.innerHTML = SCORES_HUMAN
SCORES_COMPUTER_TEXT.innerHTML = SCORES_COMPUTER
}
ROCK.addEventListener("click", function (e){
playRound ("ROCK");
});
PAPER.addEventListener("click", function (e){
playRound("PAPER");
});
SCISSORS.addEventListener("click", function (e){
playRound("SCISSORS");
});
function game() {
//Scoreboard
/*
while (SCORES_HUMAN < 5 && SCORES_COMPUTER < 5){
playRound(playerSelection(), getComputerChoice());
}
console.log(playRound(playerSelection(), getComputerChoice()));
*/
if(SCORES_HUMAN > SCORES_COMPUTER) {
console.log("You Win!");
} else if(SCORES_HUMAN < SCORES_COMPUTER) {
console.log("You Lose!");
}
console.log("HUMAN: "+ SCORES_HUMAN +" COMPUTER: "+ SCORES_COMPUTER);
}
function playRound(playerSelection) {
computerChoice = getComputerChoice()
//compare playerSelection to getComputerChoice
//return the outcome
if (playerSelection === "ROCK" && computerChoice === "Scissors") {
SCORES_HUMAN++;
// return "You Win! Rock beats Scissors";
} else if (playerSelection === "ROCK" && computerChoice === "Paper") {
SCORES_COMPUTER++;
// return "You Lose! Paper beats Rock";
} else if (playerSelection === "PAPER" && computerChoice === "Rock") {
SCORES_HUMAN++;
// return "You Win! Paper beats Rock";
} else if (playerSelection === "PAPER" && computerChoice === "Scissors") {
SCORES_COMPUTER++;
// return "You Lose! Scissors beats Paper";
} else if (playerSelection === "SCISSORS" && computerChoice === "Paper") {
SCORES_HUMAN++;
// return "You Win! Scissors beats Paper";
} else if (playerSelection === "SCISSORS" && computerChoice === "Rock") {
SCORES_COMPUTER++;
// return "You Lose! Rock beats Scissors";
} else {
// return "It's a tie!";
}
updateScores()
}
//game();