A simple Rock Paper Scissors that isn't being simple

html-css
javascript
#1

Guys, I’m writing up a simple rock paper scissors game, but (see code) the decider function’s “if” statement isn’t working. Can someone tell me why?

var powerTri = new Object()
powerTri.weakness = {"rock": "Paper",
                     "paper": "Scissors",
                     "scissors": "Rock"};
powerTri.strength = {"rock": "Scissors",
                      "paper": "Rock",
                      "scissors": "Paper"};
 
// Decider

var decider = function(tac, user){
    tac = tac.toLowerCase()
    alert("Tac chose " + tac + "!");
    
    if (powerTri.weakness[tac] === user){
        alert("You win!")
    } else if (powerTri.strength[tac] === user){
            if (powerTri.strength[tac] === "Rock"){
                alert("You were smothered in paper...")
            } else if (powerTri.strength[tac] === "Paper") {
                alert("You were diced by scissors...")
            } else if (powerTri.strength[tac] === "Scissors"){
                alert("You were smashed by rock...")
            } else {
            }
        }   
    }

// Random RPS!

rpsStarter.addEventListener("click", function () {
    // Assigning variables to buttons
 
    var x = Math.random(); 
    var ai
    
    // AI Randomly picks its sign, battle is determined
    
    if (x <= 0.33){ // AI gets Rock
        ai = "Rock";
        decider(ai, currentChoice.textContent);
    } else if (x <= 0.66){  // AI gets Paper
        ai = "Paper";
        decider(ai, currentChoice.textContent);
    } else {  // AI gets Scissors
        ai = "Scissors";
        decider(ai, currentChoice.textContent);
    }
});

PS: If you need my HTML or more info, I got it! Plz help!

#2

Given html code is needed to make this game work, the full code would be very useful

#3

Here u go:

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='style.css'/>
    <meta charset="UTF-8">
    <title> Tac </title>
</head>

    
    
  <!-- R.P.S. container -->
    <div id="container">
        <!-- Title -->
        <p id="title"> Rock, Paper, Scissors!</p>
        <!-- R.P.S. selectors -->
        <table id="userSelector">
            <th id="userHead" colspan="3" style="background-color: black"> Select Your Pose </th>
            <tbody>
                <tr>
                    <td><button id="rock"> Rock </button></td>
                    <td><button id="paper"> Paper </button></td>
                    <td><button id="scissors"> Scissors </button></td>
                </tr>
                <tr>
                    <td  colspan="3" id="currentChoice"></td>
                </tr>
            </tbody>
        </table>
        <table id="aiSelector">
            <th id="aiHead" colspan="3" style="background-color: black"> A.I.'s Pose </th>
            <tr>
                <td id="aiRock"> Rock </td>
                <td id="aiPaper"> Paper </td>
                <td id="aiScissors"> Scissors </td>
            </tr>
            <tr>                    
                <td  colspan="3" id="aiChoice"></td>
            </tr>
        </table>
        <!-- Buttons -->
        <button id="rpsStarter">
            Click to lock your choice and start the battle!
        </button>
        <table id="scoreboard">
        <th colspan="4" id="scoreboardTitle"> Scoreboard </th>
            <tr>
                <td id="userWinsTitle"> Your Wins </td>
                <td id="tiesTitle"> Ties </td>
                <td id="aiWinsTitle"> AI Wins </td>
                <td id="totalGamesTitle"> Total Games</td>
            </tr>
            <tr>
                <td id="userWins"> 0 </td>
                <td id="ties"> 0 </td>
                <td id="aiWins"> 0 </td>
                <td id="totalGames"> 0 </td>
            </tr>
        </table>
    </div>
    
 <script src='script.js'>
    </script>   
    
    
<body>
  
    
</body>

    
</html>

HTML at ur service!

#4

If u don’t want ur eyes to melt, I’ve got CSS to make it look cool (c what I did there?).

#5

the problem is here:

<td  colspan="3" id="currentChoice"></td>

its blank, so decider(ai, currentChoice.textContent); the textContent of currentChoice is blank, so your comparison won’t work.

#6

I’ll try it and get back 2 u.

#7

K, mtf, that doesn’t work. The function can read the ai part, and understands the currentChoice.textContent still, it’s just that the problem was it wouldn’t conduct the ‘if’ statement to display who won. Off of this JS I gave you, there are button handlers to fill the currentChoice space with “Rock”, “Paper”, or “Scissors” based on what the user picks. Do you have a solution?

The button handling:

// Buttons

const currentChoice = document.querySelector('#currentChoice');
const buttonRock = document.querySelector('#rock');
const buttonPaper = document.querySelector('#paper');
const buttonScissors = document.querySelector('#scissors');
const rpsStarter = document.querySelector('#rpsStarter')

// Scoreboard

const userWins = document.querySelector('#userWins')
const aiWins = document.querySelector('#aiWins')
const ties = document.querySelector('#ties')
const totalGames = document.querySelector('#totalGames')

// Button Functions

buttonRock.addEventListener("click", function () {
 currentChoice.textContent = this.textContent;
});

buttonPaper.addEventListener("click", function () {
 currentChoice.textContent = this.textContent;
});

buttonScissors.addEventListener("click", function () {
 currentChoice.textContent = this.textContent;
});

If you need more info, just lemme know plz.

#8

P.S.: when I say function, I mean decider(tac, user)

#9

please post full code, otherwise i have to guess how you implemented the new code

If you want to make things easier, you can put the code in a bin like jsbin and share the bin here

#10

I don’t know how to use the bins… could I just send u the pieces?

#11

then post the full code on the forum, i need to see the full code so i can see the changes you made

#12 
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='style.css'/>
    <meta charset="UTF-8">
    <title> Tac </title>
</head>

    
    
  <!-- R.P.S. container -->
    <div id="container">
        <!-- Title -->
        <p id="title"> Rock, Paper, Scissors!</p>
        <!-- R.P.S. selectors -->
        <table id="userSelector">
            <th id="userHead" colspan="3" style="background-color: black"> Select Your Pose </th>
            <tbody>
                <tr>
                    <td><button id="rock"> Rock </button></td>
                    <td><button id="paper"> Paper </button></td>
                    <td><button id="scissors"> Scissors </button></td>
                </tr>
                <tr>
                    <td  colspan="3" id="currentChoice"> --- </td>
                </tr>
            </tbody>
        </table>
        <table id="aiSelector">
            <th id="aiHead" colspan="3" style="background-color: black"> A.I.'s Pose </th>
            <tr>
                <td id="aiRock"> Rock </td>
                <td id="aiPaper"> Paper </td>
                <td id="aiScissors"> Scissors </td>
            </tr>
            <tr>                    
                <td  colspan="3" id="aiChoice"></td>
            </tr>
        </table>
        <!-- Buttons -->
        <button id="rpsStarter">
            Click to lock your choice and start the battle!
        </button>
        <table id="scoreboard">
        <th colspan="4" id="scoreboardTitle"> Scoreboard </th>
            <tr>
                <td id="userWinsTitle"> Your Wins </td>
                <td id="tiesTitle"> Ties </td>
                <td id="aiWinsTitle"> AI Wins </td>
                <td id="totalGamesTitle"> Total Games</td>
            </tr>
            <tr>
                <td id="userWins"> 0 </td>
                <td id="ties"> 0 </td>
                <td id="aiWins"> 0 </td>
                <td id="totalGames"> 0 </td>
            </tr>
        </table>
    </div>
    
 <script src='script.js'>
    </script>   
    
    
<body>
  
    
</body>

    
</html>



// Buttons

const currentChoice = document.querySelector('#currentChoice');
const buttonRock = document.querySelector('#rock');
const buttonPaper = document.querySelector('#paper');
const buttonScissors = document.querySelector('#scissors');
const rpsStarter = document.querySelector('#rpsStarter')

// Scoreboard

const userWins = document.querySelector('#userWins')
const aiWins = document.querySelector('#aiWins')
const ties = document.querySelector('#ties')
const totalGames = document.querySelector('#totalGames')

// Button Functions

buttonRock.addEventListener("click", function () {
 currentChoice.textContent = this.textContent;
});

buttonPaper.addEventListener("click", function () {
 currentChoice.textContent = this.textContent;
});

buttonScissors.addEventListener("click", function () {
 currentChoice.textContent = this.textContent;
});

// The triangle of power

var powerTri = new Object()
powerTri.weakness = {"rock": "Paper",
                     "paper": "Scissors",
                     "scissors": "Rock"};
powerTri.strength = {"rock": "Scissors",
                      "paper": "Rock",
                      "scissors": "Paper"};
 
// Decider

var decider = function(tac, user){
    tac = tac.toLowerCase()
    alert("Tac chose " + tac + "!");
    alert(user)
    
    if (powerTri.weakness[tac] === user){
        alert("You win!")
    } else if (powerTri.strength[tac] === user){
            if (powerTri.strength[tac] === "Rock"){
                alert("You were smothered in paper...")
            } else if (powerTri.strength[tac] === "Paper") {
                alert("You were diced by scissors...")
            } else if (powerTri.strength[tac] === "Scissors"){
                alert("You were smashed by rock...")
            } else {
            }
        }   
    }

// Random RPS!

rpsStarter.addEventListener("click", function () {
    // Assigning variables to buttons
    /*** var uW = userWins.textContent
    var aW = aiWins.textContent
    var t = ties.textContent
    var tG = totalGames.textContent
    var cC = currentChoice.textContent; ***/  
    var x = Math.random(); 
    var ai
    
    // AI Randomly picks its sign, battle is determined
    
    if (x <= 0.33){ // AI gets Rock
        ai = "Rock";
        decider(ai, currentChoice.textContent);
    } else if (x <= 0.66){  // AI gets Paper
        ai = "Paper";
        decider(ai, currentChoice.textContent);
    } else {  // AI gets Scissors
        ai = "Scissors";
        decider(ai, currentChoice.textContent);
    }
    
    // Battle is determined
    
  /***  if (var ai === "Rock"){ //AI gets Rock
        if (currentChoice.textContent === "Paper"){
            alert("You Win!" + ai)
        } else if (cC === "Scissors"){
            alert("You get smashed with rock...")
        }  
    } else if (ai === "Paper"){ //AI gets Paper
        if (cC === "Scissors"){
            alert("You Win!")
        } else if (cC === "Rock"){
            alert("You get smothered by paper...")
        }       
    } else if (ai === "Scissors"){ //AI gets Scissors
        if (cC === "Rock"){
            alert("You Win!")
        } else if (cC === "Paper"){
            alert("You get shredded with scissors...")
        }   
    } else if (ai === currentChoice.textContent) {
        alert("Tie!")
    } else {
        
    } ***/
}); 




/* Main Box */

#container {
    background-color: whitesmoke;
    border: 3px aqua solid;
    height: 600px;
    width: 700px;
    text-align: center;
    font-size: 30px;
    color: white;
}

/* Title */

#title {
    color: black;
    font-family: Rockwell;
    font-size: 30px;
}

/* Selectors */

#userSelector {
    font-family: Rockwell;
    border: 3px solid black;
    /* top, right, bottom, left */
    margin: 70px 0px 0px 30px;
}

#userHead, #aiHead {
    font-family: Rockwell;
    color: white;
    border: 3px solid darkgray;
}

#aiSelector, td, th {
    font-family: Rockwell;
    border: 3px solid black;
    margin: -153px 0px 0px 370px;
}

/* Inner Pieces of Selector */

/* -User- */

#rock, #paper, #scissors {
    font-family: Rockwell;
    width: 90px;
    height: 40px;
    font-size: 20px;
    border: 3px solid; 
} 

#rock {
    color: sandybrown
}

#paper {
    color: deepskyblue
}

#scissors {
    color: dimgray
}

#currentChoice {
    width: 270px;
    height: 40px;
    border: 3px solid black;
    color: black;
    font-family: Rockwell;
    font-size: 20px;
}

/* -AI- */

#aiRock, #aiPaper, #aiScissors {
    font-family: Rockwell;
    width: 90px;
    height: 40px;
    font-size: 20px;
    border: 3px solid;
}

#aiRock {
    color: darkgray
}

#aiPaper {
    color: darkgray
}

#aiScissors {
    color: darkgray
}

#aiChoice {
    width: 270px;
    height: 40px;
    border: 3px dashed darkgray;
    color: black;
} 

/* Battle Button */

#rpsStarter {
    width: 300px;
    height: 50px;
    margin: 40px;
    font-family: Rockwell;
    border: 5px solid black;
    background-color: darkgray;
    color: white;
    font-size: 17px;
}

/* Stats Board */

#scoreboard {
    background-color: whitesmoke;
    border: 5px dashed darkgray;
    height: 170px;
    width: 600px;
    text-align: center;
    font-size: 30px;
    color: black;
    margin: 0px 0px 0px 50px;
    font-family: Rockwell;
    padding: 10px;
}

#scoreboardTitle, #userWinsTitle, #tiesTitle, #aiWinsTitle, #totalGamesTitle {
    background-color: black;
    color: white;
}

#userWinsTitle{
    color: deepskyblue;
}

#tiesTitle {
    color: gold;
}

#aiWinsTitle {
    color: red
}

#scoreboardTitle {
    border: 3px solid darkgrey;
}

#userWins {
    border: 3px solid deepskyblue;
    color: deepskyblue;
}

#ties {
    border: 3px solid gold;
    color: gold;
}

#aiWins {
    border: 3px solid red;
    color: red;
}
#13

I put the HTML, then the JS starting at “//Buttons”, then the CSS starting at “/* Main Box */”.

#14

the use of Rock and rock can work really confusing, i recommend to make all rocks, papers and scissors all lowercase to prevent mistakes in string comparison (which is case sensitive

here is the code in a bin:

http://jsbin.com/jonerukeji/edit?js,console,output

then you can share it again after you made the changes

#15

I can’t see the bin… (like, it’s not anywhere on ur post)

#16

it was, it was the big white space in the middle of my post.

but i didn’t make any changes, i just did a suggestion

#17

I FINALLY GOT IT! I FIGURED IT OUT! Ur inspiration about case sensitivity got me sparked. I figured out the issue, and am on a role again! Thnx, bro!

#18

Also, as a sign of my thanks, if u can tell me how to get u the code in a bin, you can play the rock paper scissors I made (I know that sounds pretty small of a gift, but it’s the best thing I thought of since u helped me so much :wink: ).