Changing Rock, Paper Scissors from Prompt to Button input


#1

Can someone please help me understand where I am going wrong? I am losing my mind trying to figure out how to get the playerSelection to register the button input rather than the prompt input.

Rock Paper Scissors

Rock
Paper
Scissors


#2

Can you post your code, please?


#3

Sorry, I thought I did. Am I doing it wrong? I see it here in the text box but when I click Save Edit it doesn’t look like it is here?

html
body

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

body

script

let playerScore = 0;
let computerScore = 0;

function playerPlay() {

document.getElementById(‘rock’).onclick = playerSelection;
document.getElementById(‘paper’).onclick = playerSelection;
document.getElementById(‘scissors’).onclick = playerSelection;

}

function computerPlay() {
const computerSelection = [‘rock’,‘paper’,‘scissors’];
return computerSelection[Math.floor(Math.random() * 3)];

}

function playRound() {
playerSelection = playerPlay();
computerSelection = computerPlay();

if (playerSelection == ‘rock’ && computerSelection == ‘paper’) {
alert (“You lose, paper covers rock!”);
computerScore++;
} else if (playerSelection == ‘rock’ && computerSelection == ‘scissors’) {
alert(“You win, rock crushes scissors!”);
playerScore++;
} else if (playerSelection == ‘paper’ && computerSelection == ‘rock’) {
alert(“You win, paper covers rock!”);
playerScore++;
} else if (playerSelection == ‘paper’ && computerSelection == ‘scissors’) {
alert(“You lose, scissors cuts paper!”);
computerScore++;
} else if (playerSelection == ‘scissors’ && computerSelection == ‘paper’) {
alert(“You win, scissors cuts paper!”);
playerScore++;
} else if (playerSelection ==‘scissors’ && computerSelection == ‘rock’) {
alert(“You lose, rock crushes scissors!”);
computerScore++;
} else {
alert (“It’s a tie!!”);
computerScore++;
playerScore++;
}
};

function game() {
while ((playerScore<5) && (computerScore<5)) {
playRound();
console.log(‘You have ’ +playerScore+ ’ points.’);
console.log(‘The computer has ’ +computerScore+ ’ points.’);
}
if (playerScore == 5 && computerScore == 5) {
alert(“It’s a tie!”);
} else if (playerScore == 5) {
alert(“You win!!!”);
} else if (computerScore == 5) {
alert(“You lost! Try again…”);
}
}

game();

script

html


#4

I’m a relative noob myself, just slightly further along than you (I’ve finished RockPaperScissors and am nearing the end of Etch-a-Sketch), but here’s what I see:

It looks like most of your HTML tags are missing, e.g. you need <html> instead of html or <button id='rock'>Rock</button> instead of button id='rock'>Rock</button.

Also, I think onclick goes in html, for example, like this <button id = 'rock' onclick='playerPlay()'>Rock</button> and then refactor/rewrite your function in javascript.

Instead of onclick, you could have something like this in your javascript:

constant rock=document.querySelector('#rock');
rock.addEventListener('click', playerPlay = ()=> {
  playerSelection='rock'}); 

I know I didn’t give your a complete solution, but I hope this helps you to start getting unstuck. For me personally, I found eventListeners very difficult, but now they’ve become easier. Best of luck!


#5

Thank you! I will take a look. The tags are missing or I took out the leading/ending < > because I had to remove them in order for the text to work in this window.