vendredi 10 septembre 2021

Rock Paper Scissors and the one mysterious response error

I am currently working on my rock paper scissors game. Specifically, I'm working on eventListeners and making sure that when someone clicks a "rock" button, a function is triggered for the computer to randomly pick either rock, paper, or scissors and then creates a new paragraph inside a container with a concatenated response such as "You win, paper beats rock". All but one of my responses are working.

let results = playerWin + rockWin; is the only response that is for some reason not working. It should say "You win, rock beats scissors." Instead, it is going back and saying it was a tie. I have console.logged to see if this was occurring without the eventlistener attached. For some reason it works out, but when i want it to print when triggered, it just isn't working. Can you help me find what I'm missing? I definitely can provide more of my code if the issue isn't within the code that I have. I just didn't want to clog my post with unrelated code.

const options = ["rock", "paper", "scissors"];
const rock = options[0];
const paper = options[1];
const scissors = options[2];
const rockWin = "Rock beats scissors.";
const paperWin = "Paper beats rock.";
const scissorsWin = "Scissors beats paper";
const tie = "It was a tie";
const playerWin = "You won! ";
const computerWin = "You lose! ";
const oops = "Please try again";
let computerPoints = 0;
let playerPoints = 0;

//eventListeners to html

const btn = document.querySelectorAll('btn');
const rockbtn = document.querySelector('#rockbtn');
const paperbtn = document.querySelector('#paperbtn');
const scissorsbtn = document.querySelector('#scissorsbtn');
const resultContainer = document.querySelector('#resultContainer')
const resultPara = document.querySelector('#resultPara')
//Computer's choice

function computerPlay(){
let compChoice = options[Math.floor(Math.random() * options.length)];
return compChoice;
}


//One round of the game
    function playRound(playerSelection, computerSelection){
        if (playerSelection === computerSelection){
            let results = tie;
            resultPara.textContent = results;
            console.log(playerSelection,playerPoints);
            console.log(computerSelection, computerPoints);
            return tie;
        }

        else if(playerSelection === rock && computerSelection === paper){
            computerPoints = computerPoints + 1;
            let results = computerWin + paperWin;
            resultPara.textContent = results;
            console.log(playerSelection,playerPoints);
            console.log(computerSelection,computerPoints);
            return computerWin + paperWin;
        }

        else if(playerSelection === rock && computerSelection === scissors){
            playerPoints = playerPoints + 1;
            let results = playerWin + rockWin;
            console.log(playerSelection,playerPoints);
            console.log(computerSelection,computerPoints);
            return playerWin + rockWin;

Further down I have my eventlisteners.

paperbtn.addEventListener('click', paperPlay);
scissorsbtn.addEventListener('click', scissorsPlay);

function rockPlay(){
    playRound(rock, computerPlay());
}


function paperPlay(){
    playRound(paper, computerPlay());
}
function scissorsPlay(){
    playRound(scissors, computerPlay());
}


Aucun commentaire:

Enregistrer un commentaire