Help with bugged Rock, Paper, Scissors Code

Get Help JavaScript
#1

I’m having some unusual bugs while trying to run my RPS game. Sometimes, it will just not give the score point to the winner, even though everything else seems to work as intended… Each function is linked as an “onclick” event on three different buttons. Here’s the code:

// JavaScript source code

let playerChoice = document.getElementById('PLAplay');

let cpuChoice = document.getElementById('CPUplay');

const playerPoint = document.getElementById('playerScorepoint')

const cpuPoint = document.getElementById('cpuScorepoint')

let plScore = 1;

let cpuScore = 1;

const chooseRock = () => {

    playerChoice.src = "icons/PLArock.png";

    playerChoice.width = 180;

    playerChoice.height = 180;

    return true;

};

const choosePaper = () => {

    playerChoice.src = "icons/PLApaper.png";

    playerChoice.width = 180;

    playerChoice.height = 180;

    return true;

};

const chooseScissors = () => {

    playerChoice.src = "icons/PLAscissors.png";

    playerChoice.width = 180;

    playerChoice.height = 180;

    return true;

};

const cpuBehaviour = (minValue = 1, maxValue = 12) => {

    minValue = Math.ceil(minValue);

    maxValue = Math.floor(maxValue);

    let choiceResult = Math.floor(Math.random() * (maxValue - minValue + 1) + minValue);

    if (choiceResult >= 1 && choiceResult <= 4) {

        cpuChoice.src = "icons/CPUrock.png";

        cpuChoice.width = 180;

        cpuChoice.height = 180;

        return "Rock";

    }

    else if (choiceResult >= 5 && choiceResult <= 8) {

        cpuChoice.src = "icons/CPUpaper.png";

        cpuChoice.width = 180;

        cpuChoice.height = 180;

        return "Paper";

    }

    else if (choiceResult >= 9 && choiceResult <= 12) {

        cpuChoice.src = "icons/CPUScissors.png";

        cpuChoice.width = 180;

        cpuChoice.height = 180;

        return "Scissors";

    }

};

const checkWinRock = () => {

    if (chooseRock() == true && cpuBehaviour() === "Paper") {

        cpuPoint.innerHTML = cpuScore;

        cpuScore++;

    }

    else if (chooseRock() == true && cpuBehaviour() === "Rock") {

        cpuPoint.innerHTML = cpuPoint.innerHTML;

        playerPoint.innerHTML = playerPoint.innerHTML;

    }

    else if (chooseRock() == true && cpuBehaviour() === "Scissors") {

        playerPoint.innerHTML = plScore;

        plScore++;

    }

};

const checkWinPaper = () => {

    if (choosePaper() == true && cpuBehaviour() === "Scissors") {

        cpuPoint.innerHTML = cpuScore;

        cpuScore++;

    }

    else if (choosePaper() == true && cpuBehaviour() === "Paper") {

        cpuPoint.innerHTML = cpuPoint.innerHTML;

        playerPoint.innerHTML = playerPoint.innerHTML;

    }

    else if (choosePaper() == true && cpuBehaviour() === "Rock") {

        playerPoint.innerHTML = plScore;

        plScore++;

    }

};

const checkWinScissors = () => {

    if (chooseScissors() == true && cpuBehaviour() === "Rock") {

        cpuPoint.innerHTML = cpuScore;

        cpuScore++;

    }

    else if (chooseScissors() == true && cpuBehaviour() == "Scissors") {

        cpuPoint.innerHTML = cpuPoint.innerHTML;

        playerPoint.innerHTML = playerPoint.innerHTML

    }

    else if (chooseScissors() == true && cpuBehaviour() == "Paper") {

        playerPoint.innerHTML = plScore;

        plScore++;

    }

};
#2

Hi @mtthew1718
welcome to the forum! Could you post your html as well, please?

#3

As asked, here’s my HTML code:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>RPS Situation</title>

    <link href="RPS.css" rel="stylesheet" />

    <script defer src="RPS.js"></script>

</head>

<body>

    <div id="wholepage">

        <div id="header1">

            <h1>Rock Paper Scissors</h1>

            </div>

        <div id="header2">

            <h2>Let's begin!</h2>

            </div>

        <div id="actualRPS">

        <div id="playerContainer">

            <div class="scoreboard">

                <div id="playerScore">

                    <span>Player</span>

                </div>

                <span class="score">Score: <span id="playerScorepoint" class="points">0</span></span>

                </div>

            <div class="iconContainer">

                <img id="PLAplay" src="icons/placeholder.png" alt="player" />

                </div>

            </div>

        <div id="cpuContainer">

            <div class="scoreboard">

                <div id="cpuScore">

                    <span>CPU</span>

                </div>

                <span class="score">Score: <span id="cpuScorepoint" class="points">0</span></span>

                </div>

            <div class="iconContainer">

                <img id="CPUplay" src="icons/placeholder.png" alt="CPU" />

                </div>

        </div>

            </div>

        <div id="selectRPS">

            <h2 id="selectTitle">Here goes:</h2>

            <div id="buttonsRPS">

                <button onclick="chooseRock(); cpuBehaviour(); checkWinRock()" class="choiceButton" id="rock"><img class="choice" src="icons/PLArock.png" alt="rock" /></button>

                <button onclick="chooseScissors(); cpuBehaviour(); checkWinScissors()" class="choiceButton" id="scissors"><img class="choice" src="icons/PLAscissors.png" alt="scissors" /></button>

                <button onclick="choosePaper(); cpuBehaviour(); checkWinPaper()" class="choiceButton" id="paper"><img class="choice" src="icons/PLApaper.png" alt="paper" /></button>

                </div>

            </div>

    </div>

</body>

</html>
#4

If you add a console.log() to each of the functions

chooseRock()
choosePaper()
chooseScissors()

you will see that with each button click you call one of these functions three times at once. I think that is causing problems.

2 Likes
#5

Thanks for the insight! Even though I’ve been not able to identify what’s causing this yet… I’ve tried adding every function to a single addeventlistener method, to no avail. Now I’m thinking about putting all these functions inside one major function, and call this only one major function with the buttons. Anyways, I appreciate your help!

#6

You’re welcome. You don’t need to change much though. You already invoke the function in your button:

<button onclick="chooseRock();

That is all you need. Delete the other function calls in your button and try to get it all done with one function call.

Then you also call chooseRock() in your if and else if condition:

const checkWinRock = () => {

    if (chooseRock() == true && cpuBehaviour() === "Paper") {

Instead of chooseRock() you would just need to pass an argument with the value which was generated by your initial on click function call. Same for cpuBehaviour().

1 Like