I'm finding out one of the hardest parts of programming is fixing bugs haha

Okay so I’ve never actually used Code Pen so hopefully thelink works.

Also, sorry about the CSS not being scaleable, it may or may not be ugly to look at depending on your screen size. But CSS wasn’t my focus in this!

So, what I have here is a standard “type a word” game. You click a button, and it fetches a word from an API. This also starts up a timer that counts down from 7. if it reaches 0 you lose the game. If you type a complete word before the timer runs out, it’ll give you a new word and “reset” the timer. The timer seems to be bugged a bit because it’s using a set interval.

Anyways, the problems I’m trying to fix currently are

1- I can still click the button after game is lost and fetch a new word. I’ve tried wrapping the button in an if statement regarding if the game is lost or not and for some reason it didn’t work.

2- even after the game is lost, if you finish a word, it will still reset the timer and allow you to continue playing. I’m sure fixing this has to do with clearing the interval if a condition is met but I’m not sure how to do this? From what I’ve read you have to attach the setInterval to a variable and then call that variable in clearInterval for it to work? My problem is I can’t do this because my clear interval is higher up in the JS file and the variable won’t be defined yet.

you won’t see this code below in the codepen. I’m just demonstrating what I tried.

 if (gameLost === true) {
        countDown.textContent = 0
        document.getElementById('lost-game-message').style.display = 'block'
        clearInterval(timerID)
    }
 if (timerStarted === false) {
    let timerID = setInterval(timer, 1000)
    }
    timerStarted = true

and here is the CodePen!

Also, to the first problem, I don’t understand why when I wrap the function in “if game lost === false” it doesn’t let me run the function? The game mode is = to false so why does it break the app?

document.getElementById('start-game-button').addEventListener('click', getRandomWord)
    if (gameLost === false) {
    function getRandomWord() { fetch('https://random-word-api.herokuapp.com/word')
    .then((response) => response.json())
    .then((data) => {
    document.getElementById('display-word').innerHTML = `
    <h1 id="random-word">${data}</h1>` 
    
    if (timerStarted === false) {
    setInterval(timer, 1000)
    }
    timerStarted = true
    
    document.addEventListener('keyup', function() { 
        if (textInput.value == data) {
            getRandomWord()
            textInput.value = ''
            gameLost = false
            countDown.textContent = 7
        }
       })
});
    }
    }


setInterval(callGameLost, 1000)
function callGameLost() {
console.log(gameLost)
}

I see a lot of issues with your code…

First of all, what exactly do you want to happen when the game is lost? You didn’t really explain what should happen for your first question

Say you want to have the button say play again instead of fetch your word, you would do this:

line 3: let startButton = document.getElementById(‘start-game-button’)

on line 5 and 6 you didn’t declare the variables
on line 17 add startButton.textContent = “play again!”;

I recommend coding this out locally on your computer using vs code instead. I think it will make it easier for you.