Hi! I am just starting out in javascript and I am having trouble getting the respondClick function to return a variable property.
In the console log, I can see that the property has successfully “updated”, but the function does not register that. I’ve tried adding “return” at the end of the function, but it still does not work.
Here is my html file
<title>Lapis, Papyrus, Scalpellus</title>
<div class="information">
<h1>Rock, Paper, Scissors Game</h1>
<p>In this game, there are 2 players. You are one of the player and the computer will
be the other player.</p>
</div>
<p>Please choose your Lapis, Papyrus, Scalpellus selection.</p>
<button class = "pick" id="0" onClick="respondClick(this.id)">Lapis</button>
<button class = "pick" id="1" onClick="respondClick(this.id)">Papyrus</button>
<button class = "pick" id="2" onClick="respondClick(this.id)">Scalpellus</button>
<!-- Results of the game displayed using js -->
and here is my javascript file.
// create player and computer variables with null choices
const player = {
currentChoice: null
}
const computer = {
currentChoice: null
}
// create options variable, it is a list of the rock, paper, scissors choices
const options = ["Lapis", "Papyrus", "Scalpellus"];
// create function computerChooses - randomly picks computer choice
function computerChooses() {
const randomIndex = Math.floor(Math.random() * options.length);
computer.currentChoice = options[randomIndex];
console.log(computer.currentChoice)
}
// invoke function
computerChooses();
// Player choice
// on click button
function respondClick(clickedID)
{
if (clickedID==0) {
player.currentChoice = options[0];
}
else if (clickedID==1) {
player.currentChoice = options[1];
}
else {
player.currentChoice = options[2];
}
console.log(player.currentChoice)
}
// function to compare the choices between player and computer
function compareChoices(){
// Here, we're accounting out a tie scenario - if the randomIndex that was generated matches the player's choice.
if(computer.currentChoice === player.currentChoice){
displayResult("It's a tie! The computer and player both chose " + computer.currentChoice);
// Now, we write a conditional chain for each of the 3 random options the computer could make. Inside each conditional, we'll nest an "if...else" statement that compares the player's choice to the computer's choice and determines a winner.
}else if(computer.currentChoice === options[0]){
if(player.currentChoice === options[1]){
displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
}else{
displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
}
}else if(computer.currentChoice === options[1]){
if(player.currentChoice === options[2]){
displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
}else{
displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
}
}else if(computer.currentChoice === options[2]){
if(player.currentChoice === options[0]){
displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
}else{
displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
}
}
}
// function to add result to html
function displayResult(result){
// define constant resultText, assign it to a new paragraph
const resultText = document.createElement('p')
// Add text to paragraph
resultText.innerText = result;
// in the body of the document, append the text to html
document.body.appendChild(resultText);
}
// invoke the function to compare player choices
compareChoices();
I am not too sure what else I should add to the function -
function respondClick(clickedID)
{
if (clickedID==0) {
player.currentChoice = options[0];
}
else if (clickedID==1) {
player.currentChoice = options[1];
}
else {
player.currentChoice = options[2];
}
console.log(player.currentChoice)
}
So a couple things… first be sure to check how you generate your randomIndex because I don’t think it is going to generate a 0 which means the computer won’t pick ‘Lapis’.
Next, your player and computer variables are being updated properly which means your respondClick appears to be working.
I think the problem you have here is that you compare your choices right when the script executes. You need to call compare after the user clicks one of the choices. Makes sense right? You click a button, set the player currentChoice and then you compare to see if they are right. As you have it right now, the comparison is done once before the player even makes a choice.
The randomIndex does generate a 0, because Math.floor is used, so numbers are rounded down. I’ve tried and tested it.
I am not too sure how to call the compareChoice function after the respondClick event, I originally wanted to include
onClick="compareChoices()"
in each of
<button class = "pick" id="0" onClick="respondClick(this.id)">Lapis</button>
<button class = "pick" id="1" onClick="respondClick(this.id)">Papyrus</button>
<button class = "pick" id="2" onClick="respondClick(this.id)">Scalpellus</button>
but I realised I already have onClick inside so I can’t have 2.
I edited my javascript to include the compareChoice function inside, but it still doesn’t work.
// create player and computer variables with null choices
const player = {
currentChoice: null
}
const computer = {
currentChoice: null
}
// create options variable, it is a list of the rock, paper, scissors choices
const options = ["Lapis", "Papyrus", "Scalpellus"];
// create function computerChooses - randomly picks computer choice
function computerChooses() {
const randomIndex = Math.floor(Math.random() * options.length);
computer.currentChoice = options[randomIndex];
console.log(computer.currentChoice)
}
// invoke function
computerChooses();
// Player choice
// on click button
function respondClick(clickedID)
{
if (clickedID==0) {
player.currentChoice = options[0];
}
else if (clickedID==1) {
player.currentChoice = options[1];
}
else {
player.currentChoice = options[2];
}
// function to compare the choices between player and computer
function compareChoices(){
// Here, we're accounting out a tie scenario - if the randomIndex that was generated matches the player's choice.
if(computer.currentChoice === player.currentChoice){
displayResult("It's a tie! The computer and player both chose " + computer.currentChoice);
// Now, we write a conditional chain for each of the 3 random options the computer could make. Inside each conditional, we'll nest an "if...else" statement that compares the player's choice to the computer's choice and determines a winner.
}else if(computer.currentChoice === options[0]){
if(player.currentChoice === options[1]){
displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
}else{
displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
}
}else if(computer.currentChoice === options[1]){
if(player.currentChoice === options[2]){
displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
}else{
displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
}
}else if(computer.currentChoice === options[2]){
if(player.currentChoice === options[0]){
displayResult("The player wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
}else{
displayResult("The computer wins! The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice);
}
}
compareChoices();
}
}
// function to add result to html
function displayResult(result){
// define constant resultText, assign it to a new paragraph
const resultText = document.createElement('p')
// Add text to paragraph
resultText.innerText = result;
// in the body of the document, append the text to html
document.body.appendChild(resultText);
}
Why is this so? I thought that by having the compareChoice function inside the respondClick function, once the player.currentChoice is set, the compareChoice function will then be called?
