html – javascript rock paper scissors score resetting every after one move

Now the code is this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css"/>
    <!-- Custom Font For HeaderText -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    <title>RPS</title>
</head>
<body>
    <!-- Title Container -->
    <div class="header-container">
        <div class="rainbowText"><h1><a href="https://github.com/Titsnium/rps">RPS</a></h1></div>
    </div>
    <!-- Buttons (Rock, Paper, Scissors)-->
    <div class="button-container">
        <div class="buttons">
            <input type="button" value="Rock" class="button Rock" id="Rock"></input>
            <input type="button" value="Paper" class="button Paper" id="Paper"></input>
            <input type="button" value="Scissors" class="button Scissors" id="Scissors"></input>
            <input type="button" value="Reset" class="button Reset" id="Reset"></input>
        </div>
    </div>
    <!-- Scoreboard -->
    <div class="board-container">
        <div class="playerBoard">
            <h1 id="playerScore">PLAYER: 0</h1>
        </div>
        <div class="versus">
            <h1>VS</h1>
        </div>
        <div class="computerBoard">
            <h1 id="computerScore">COMPUTER: 0</h1>
        </div>
    </div>
    <!-- Result Container -->
    <div class="result-container">
        <div class="result">
            <h1></h1>
        </div>
    </div>
    <div class="footer-container"></div>
    <script>
    window.playerScore = 0;
    window.computerScore = 0;
    </script>
    <script src="index.js"></script>
</body>
</html>
document.getElementById("Rock").onclick = function() {
    window.playerMove = "Rock";
    game();
}

document.getElementById("Paper").onclick = function() {
    window.playerMove = "Paper";
    game();
}

document.getElementById("Scissors").onclick = function() {
    window.playerMove = "Scissors";
    game();
}

document.getElementById("Reset").onclick = function() {
    window.playerScore = 0;
    window.computerScore = 0;
    document.getElementById("playerScore").innerHTML = "PLAYER: 0";
    document.getElementById("computerScore").innerHTML = "COMPUTER: 0";
    document.querySelector("div.result h1").innerHTML = "";
}

function game() {

    var computerMoves = ["Rock", "Paper", "Scissors"];
    var computerMove = computerMoves[Math.floor(Math.random()*computerMoves.length)];

    console.log(playerMove);
    console.log(computerMove);
    var state = "";
    
    if (
    playerMove == "Rock" && computerMove == "Paper" || 
    playerMove == "Paper" && computerMove == "Scissors" || 
    playerMove == "Scissors" && computerMove == "Rock"
    ) {
        console.log("YOU WIN!!!");
        state = "YOU WIN!!!";
        window.playerScore += 1;
    } 
    
    else if (
    computerMove == "Rock" && playerMove == "Paper" ||
    computerMove == "Paper" && playerMove == "Scissors" || 
    computerMove == "Scissors" && playerMove == "Rock") {
        console.log("YOU LOSE!!!");
        state = "YOU LOSE!!!";
        window.computerScore += 1 ;
    } 
    
    else if (playerMove == computerMove) {
        console.log("DRAW!!!");
        state = "DRAW!!!";
    }
    document.getElementById("playerScore").innerHTML = "PLAYER: " + window.playerScore;
    document.getElementById("computerScore").innerHTML = "COMPUTER: " + window.computerScore;
    document.querySelector("div.result h1").innerHTML = state;
}

What I changed:

html:

<!--Group 1-->
- <button class="button Rock" id="Rock"></button>
+ <input type="button" value="Rock" class="button Rock" id="Rock"></input>
- <button class="button Paper" id="Paper"></button>
+ <input type="button" value="Paper" class="button Paper" id="Paper"></input>
- <button class="button Scissors" id="Scissors"></button>
+ <input type="button" value="Scissors" class="button Scissors" id="Scissors"></input>
+ <input type="button" value="Reset" class="button Reset" id="Reset"></input>
<!--Group 2-->
- <!-- Computer buttons I guess -->
- <div class="button-container">
-     <div class="buttons">
-         <button class="button Rock"></button>
-         <button class="button Paper"></button>
-         <button class="button Scissors"></button>
-     </div>
- </div>
- <h1>YOU WIN!</h1>
+ <h1></h1>
<!--Group 3-->
+ <script>
+ window.playerScore = 0;
+ window.computerScore = 0;
+ </script>

js:

// Group 4
+ document.getElementById("Reset").onclick = function() {
+     window.playerScore = 0;
+     window.computerScore = 0;
+     document.getElementById("playerScore").innerHTML = "PLAYER: 0";
+     document.getElementById("computerScore").innerHTML = "COMPUTER: 0";
+     document.querySelector("div.result h1").innerHTML = "";
+ }
// Group 5
+ var state = "";
+ state = "YOU WIN!!!"; // after console.log("YOU WIN!!!");
+ state = "YOU LOSE!!!"; // after console.log("YOU LOSE!!!");
+ state = "DRAW!!!"; // after console.log("DRAW!!!");
+ document.getElementById("playerScore").innerHTML = "PLAYER: " + window.playerScore;
+ document.getElementById("computerScore").innerHTML = "COMPUTER: " + window.computerScore;
+ document.querySelector("div.result h1").innerHTML = state;

Group 1

<button> is not recommended in HTML5. IE submits the text between <button> and </button>; other explorers submit the value attribute.

Use <input type="button"> and REMEMBER to set the value attribute.

I added a reset button too.

Group 2

Computer buttons are Not necessary

The state defaults to empty.

Group 3

Reset the score when loaded.

Group 4

Reset the score when clicked on the reset button.

Group 5

Change the scores and the state when game changed.

Now the game cam was played properly

Feel free to play it online at my site

Leave a Comment