Incrementing score and getting a message when reaching a certain amount

JavaScript
1

Hello, I’m trying to write a rock, paper, scissors game and the checkWinner function doesn’t seem to do anything when the score gets to 5, the scores continue incrementing past 5, but no message appears. I wonder if anyone could tell me what I’ve done wrong and if I’ve called it correctly, please

Many thanks

let choice
let computerChoice

let userScore = parseInt(document.getElementById("user-score"));
let computerScore = parseInt(document.getElementById("computer-score"));


document.addEventListener("DOMContentLoaded", function() {
    let buttons = document.getElementsByTagName("button");
    
    for (let button of buttons) {
        button.addEventListener("click", function() {
            choice = this.getAttribute("data-type");
            runGame();
        })
    }

    runGame();
})

function runGame() {
    let computerChoices = ["rock", "paper", "scissors"];
    let randomChoice = Math.floor(Math.random() * 3);
    computerChoice = computerChoices[randomChoice];

    let result = document.getElementById("result")

    if (choice == computerChoice) {
        result.innerText = "It's a draw!";
    } 
    else if (choice == "rock") {
        if (computerChoice == "scissors"){
            incrementPlayerScore();
            result.innerText = "You won!";
            
        } else {
            incrementComputerScore();
            result.innerText = "You lost!";
        }
    }
    else if (choice == "paper") {
        if (computerChoice == "rock"){
            incrementPlayerScore();
            result.innerText = "You won!";
        } else {
            incrementComputerScore();
            result.innerText = "You lost!";
        }
    }
    else if (choice == "scissors") {
        if (computerChoice == "paper"){
            incrementPlayerScore();
            result.innerText = "You won!";
        } else {
            incrementComputerScore();
            result.innerText = "You lost!";   
        }
    }
    checkWinner();
}

function checkWinner() {
    
    let winner = document.getElementById("winner");
    
    if (userScore == 5) {
        winner.innerText = "Congratulations! You won 5 times!";
    } else if (computerScore == 5) {
        winner.innerText = "Oh no! The computer won 5 times!";
    } 
}


function incrementPlayerScore() {

    let oldScore = parseInt(document.getElementById("user-score").innerText);
    document.getElementById("user-score").innerText = ++oldScore;

}


function incrementComputerScore() {
    
    let oldScore = parseInt(document.getElementById("computer-score").innerText);
    document.getElementById("computer-score").innerText = ++oldScore;

}
2

HTML

<body>
    <h1 class="heading">Rock, Paper, Scissors</h1>

    <div class="game-area">
        <div class="selection-area">
            <span id="player-choice">Rock</span>
            <span id="computer-choice">Scissors</span>
        </div>

        <div class="options">
            <button data-type="rock" class="btn btn-rock">Rock</button>
            <button data-type="paper" class="btn btn-paper">Paper</button>
            <button data-type="scissors" class="btn btn-scissors">Scissors</button>
        </div>

        <div>
            <p id="result">Let's Play!</p>
            <p id="winner">Who wins?</p>
        </div>
    </div>

    <div class="score-area">
        <p class="scores">Your Score <span id="user-score">0</span></p>
        <p class="scores">Computer Score <span id="computer-score">0</span></p>
    </div>


    
    <script src="assets/js/script.js"></script>
</body>
</html>
3

your code is checking these two variables, how are you changing them?

4

Ahh thanks! I thought I was increasing them in the increment score functions, but I’m not, so I need to do that, thank you very much

5

Great! That’s fixed it! Thanks very much!

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.