Can some1 plz explain...?


#1

So I’m trying to write out a rock paper scissors game, but the battle part isn’t working. Can someone tell me what’s wrong? Heres my HTML and JS (I’ll deprive your eyes of the luxury of the nice CSS I made… :wink: :

<!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;
});


// 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
    if (x <= 0.33){
        ai = "Rock";
        alert(ai);
    } else if (x <= 0.66){
        ai = "Paper";
        alert(ai);
    } else {
        ai = "Scissors";
        alert(ai);
    }
    // Battle is determined
    if (ai == "Rock"){ //AI gets Rock
        if (cC == "Paper"){
            alert("You Win!")
            uW = toString(parseInt(uW) + 1)
            tG = toString(parseInt(tG) + 1)
        } else if (cC == "Scissors"){
            alert("You get smashed with rock...")
            aW = toString(parseInt(aW) + 1)
            tG = toString(parseInt(tG) + 1)
        }  
    } else if (ai == "Paper"){ //AI gets Paper
        if (cC == "Scissors"){
            alert("You Win!")
            uW = toString(parseInt(uW) + 1)
            tG = toString(parseInt(tG) + 1)
        } else if (cC == "Rock"){
            alert("You get smothered by paper...")
            aW = toString(parseInt(aW) + 1)
            tG = toString(parseInt(tG) + 1)
        }       
    } else if (ai == "Scissors"){ //AI gets Scissors
        if (cC == "Rock"){
            alert("You Win!")
            uW = toString(parseInt(uW) + 1)
            tG = toString(parseInt(tG) + 1)
        } else if (cC == "Paper"){
            alert("You get shredded with scissors...")
            aW = toString(parseInt(aW) + 1)
            tG = toString(parseInt(tG) + 1)
        }   
    } else if (ai == currentChoice.textContent) {
        alert("Tie!")
        t = toString(parseInt(t) + 1)
    } else {
        
    }
});

PS: I put them in different files. Please help!