CODEWITHSUNDEEP
javascript
Sophia
Sophia

Reputation: 1

How do I make a number decrease by 5 every 20 seconds, and then display this number live?

How do I make a number (var is f) decrease by 5 every 20 seconds, and then display this number live? I am making a Hunger Games simulator to play live with my friends, and I want each tributes hunger to display live for them (all on separate devices). I want the hunger to decrease by 5 every 20 seconds. This is what I have tried:

    <h1>Hunger Games Tribute Status:</h1>
    <button onclick="startgame()">START GAME</button>
    <h5 id="hunger"></h5>
</body>

function startgame(){
var f = 200;
var intervalID = window.setInterval (foodcountdown(), 20000);
document.getElementById("hunger".innerHTML = f; }

function foodcountdown() {
var x=f-5;
var f=x;   }

Upvotes: 0

Views: 343

Answers (6)

Carlo Bos
Carlo Bos

Reputation: 3293

The main problem is that you are invoking your foodcountdown function instead of passing it in. Also you need to make sure that the startgame function is called when the DOM is loaded (maybe call it in the onload of the body).

var f = 200;
var interval;

function startgame() {
    interval = setInterval(foodcountdown, 20000);
}

function foodcountdown() {
    console.log(f);
    if (f <= 0) {
        clearInterval(interval);
    }
    document.getElementById("hunger").innerHTML = f;
    f -= 5;
}

<!DOCTYPE html>
<html>
    <script src="main.js"></script>
    <body onload="startgame()">
        <div id="hunger"></div>
    </body>
</html>

Upvotes: 0

blex
blex

Reputation: 25659

  1. setinterval(foodcountdown, 20000); - There should not be (), you need to pass the function to the interval to let it execute it, not execute it yourself

  2. getElementById('hunger').innerHTML - You need a . in front of innerHTML, not a ; as you currently have

  3. By using the keyword var in var f = ... inside your foodcountdown function, you are creating a local variable, and thus not affecting the one you want, declared in startGame. f needs to be accessible by both functions, make it global, or at least in the same upper scope

  4. Your intervalID also needs to be accessible if you ever want to clear it

  5. You're displaying the food count at the start of the game, but never again

Here is a fixed demo:

var f, intervalID;

function startgame() {
  f = 200; // Allows you to restart a game from the start
  clearInterval(intervalID); // In case a game was already started
  intervalID = setInterval(foodcountdown, 200); // changed to 200ms for the demo
  displayFoodCount();
}

function foodcountdown() {
  f -= 5;
  displayFoodCount();
  if (f <= 0) {
    clearInterval(intervalID);
    console.log('Game over!');
  }
}

function displayFoodCount() {
  document.getElementById("hunger").innerHTML = f;
}
<h1>Hunger Games Tribute Status:</h1>
<button onclick="startgame()">START GAME</button>
<h5 id="hunger"></h5>

Upvotes: 1

Mohamed Ali
Mohamed Ali

Reputation: 141

Here is working example. Move your variables and DOM Selections to the the top. And also you can use innerText instead of innerHTML if you don't going to insert HTML.

const hunger = document.getElementById("hunger");
const f = 200;

hunger.innerText = f;

function foodCountDown() {
 setInterval(function() {
   f -= 5
   hunger.innerText = f
 }, 20000)
}

Upvotes: 0

Dan Knights
Dan Knights

Reputation: 8368

Move the bulk of the logic inside the setInterval function and make sure to return the function if the timer reaches 0:

function startgame() {
  let f = 200;
  document.getElementById("hunger").innerHTML = f;

  const intervalID = window.setInterval(() => {
    if (f === 0) return;

    f -= 5;
    document.getElementById("hunger").innerHTML = f;
  }, 500);
}
<h1>Hunger Games Tribute Status:</h1>
<button onclick="startgame()">START GAME</button>
<h5 id="hunger"></h5>

(Shortened the time for demonstration.)

Upvotes: -1

juzraai
juzraai

Reputation: 5943

  1. You should declare f as a global variable, outside the functions.
  2. You should update the HTML element every time you decrease the value.
  3. You should pass the function to setInterval, and not the result of the function.
  4. You have a ; before innerHTML instead of ..

So (I decreased the interval for the sample):

var f, intervalID;

function startgame() {
  f = 200;
  intervalID = window.setInterval(foodcountdown, 2000);
}

function foodcountdown() {
  f = f - 5;
  document.getElementById("hunger").innerHTML = f;
}
<h1>Hunger Games Tribute Status:</h1>
<button onclick="startgame()">START GAME</button>
<h5 id="hunger"></h5>

Upvotes: 0

ControlAltDel
ControlAltDel

Reputation: 35096

If you want to share you f variable, you should put it in the global scope

var f = 200; //moved

function startgame(){
  var intervalID = window.setInterval (foodcountdown(), 20000);
  document.getElementById("hunger").innerHTML = f; //corrected 
}

function foodcountdown() {
  f=f-5; //corrected
  document.getElementById("hunger").innerHTML = f; //added 

}

Upvotes: 2

Related Questions