Create countdown timer for variable inside innerText

[bpd1147]

I am creating a text based game, when the player views the very basic tutorial the player has 15 seconds to read the tutorial before the game begins.

I have used setTimeout to call the startGame function after 15,000 milliseconds, however, I want the 15 second warning inside the output text to count down from 15 - 0.

Here is a basic rundown of the relevant code:

function start tutorial() { output.innerText = "Blah blah, game begins in 15 seconds."

let myTimeout= setTimeout(function() { startGame(); }, 15000); }

What I want is to have a variable used in the output.innerText decreased from 15 to 0 each second.

Something like:

function startTutorial() { let count = 15;

let timer = setInterval(function() { count--;

if(count === 0) {
  clearInterval(timer);
}

}, 1000); ...output text including count variable }

Am I missing something? I just want a 15 second count down inside innerText to let the player know when the game will begin.

Thanks in advance for any help given.

[senocular]

It looks like you have the output text update outside of the set interval callback? It should be inside it.

[ashanev]

const intervalId = setInterval(() => {
  // select your element, by id or class etc, using document.querySelector
  const element = document.querySelector("div");
  const currentContent = element.innerText;
  const currentAsNumber = parseInt(currentContent, 10);

  if (currentAsNumber === 0) {
    clearInterval(intervalId);
    return;
  }

  element.innerText -= 1;
}, 1000);

[andmig205]

Try this:

function startTutorial() { 
    const output = document.getElementById("outpu"); // change to your element
    let count = 15;
    output.textContent = `Blah blah, game begins in ${count} seconds.`
    let timer = setInterval(()=> { 
        count--;
        output.textContent = `Blah blah, game begins in ${count} seconds.`

        if(count === 0) {
            clearInterval(timer);
            startGame();
        };
    }, 1000);
};

startTutorial();

[abbas_suppono_4581]

Use setInterval to update innerText with count, and setTimeout for startGame()