Confused on why this doesn't work

JavaScript
1

So basically, all I’m trying to do is to stop the button click that runs the entire dice game from being able to be clicked once the condition of “gameWon” is met

so, I wrapped the entire function with an if “gameWon = false” then the button can be clicked.

and at the bottom I made it to where if a score reaches 20 points, then gameWon = true.

so, you win the game once your score reaches 20. and once it reaches 20 it sets the gameWon to true. So why am I still able to click the button infinately?

I’m sure it’s something super simple but I can’t get this button function to quit working once a condition is met.

I’ve also console logged it and gameWon does indeed switch to true once a score goes above 20. So, what is happening here?

let playerScoreDisplayOne = document.getElementById('player-score-display-one')
let playerScoreDisplayTwo = document.getElementById('player-score-display-two')
let playerDiceDisplayOne = document.getElementById('player-dice-display-one')
let playerDiceDisplayTwo = document.getElementById('player-dice-display-two')
let playerTurnHeader = document.getElementById('player-turn-header')
let diceRollButton = document.getElementById('dice-roll-button')

let playerOneTurn = true
let gameWon = false

let player1score = 0
let player2score = 0

if (gameWon === false) {

diceRollButton.addEventListener('click', function example() {
    randomNumber = Math.floor(Math.random() *6 ) + 1
    
    if (playerOneTurn === true) {
        playerDiceDisplayOne.textContent = randomNumber
        playerScoreDisplayOne.textContent = player1score += randomNumber
        playerTurnHeader.textContent = 'Player 2 turn!'
        playerDiceDisplayOne.classList.remove('active')
        playerDiceDisplayTwo.classList.add('active')
        playerOneTurn = false
    } else if (playerOneTurn === false) {
        playerDiceDisplayTwo.textContent = randomNumber
        playerScoreDisplayTwo.textContent = player2score += randomNumber
        playerTurnHeader.textContent = 'Player 1 turn!'
        playerDiceDisplayOne.classList.add('active')
        playerDiceDisplayTwo.classList.remove('active')
        playerOneTurn = true
    }

    if (player1score >= 20) {
        playerTurnHeader.textContent = 'Player 1 wins!!!'
        gameWon = true
    } else if (player2score >= 20) {
        playerTurnHeader.textContent = 'Player 2 wins!!!'
        gameWon = true
    }
    console.log(gameWon)

})
}
2

You need to check if the game has been won each time the button is clicked.

1 Like
3

Took me a second but I figured out what you meant Haha, I put it inside of the button function and it now works perfectly.

Thank you for the help!

4

I’ve actually got a new question!
So you can see in the first line of code I attempted to give the on click function a “name” of example. the thing is that I would like to use all of the code in another button, but I think it would be crazy to copy and paste a giant block of code like that into another event listener.

I attempted to call the function in the new button, and nothing happens. I then console logged the function and it says example() is not defined

is there any way of actually calling this function? I know I could probably go inside the current “nameless” function and wrap everything in a new function and call that function somewhere else, but I’d rather not do that if I can simply somehow assign a name to the current function. Any ways of doing this?

diceRollButton.addEventListener('click', function example() {
    if (gameWon === false) {
    randomNumber = Math.floor(Math.random() *6 ) + 1
    
    if (playerOneTurn === true) {
        playerDiceDisplayOne.textContent = randomNumber
        playerScoreDisplayOne.textContent = player1score += randomNumber
        playerTurnHeader.textContent = 'Player 2 turn'
        playerDiceDisplayOne.classList.remove('active')
        playerDiceDisplayTwo.classList.add('active')
        playerOneTurn = false
    } else if (playerOneTurn === false) {
        playerDiceDisplayTwo.textContent = randomNumber
        playerScoreDisplayTwo.textContent = player2score += randomNumber
        playerTurnHeader.textContent = 'Player 1 turn'
        playerDiceDisplayOne.classList.add('active')
        playerDiceDisplayTwo.classList.remove('active')
        playerOneTurn = true
    }

    gameStatus()
    
    }
})
7

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