Nov 20, 2022

# Solution 1 :

You want to manage 3 different states…

1. Counting down until LIVE
2. LIVE
3. EXPIRED
``````(() => {

const intervalId = setInterval(() => {

// update countdown timer

if (distance < -(ELAPSED_GAMETIME_IN_MS)) {
// set EXPIRED
clearInterval(intervalId);
}
else if (distance < 0) {
// set LIVE
}

}, 1000);

})();
``````

EDIT
Working example
This example utilizes moment because it’s a great utility that provides all necessary math and formatting for dates and is perfect for this scenario.

``````<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<body>
<div id="countdown"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
<script>
(() => {
const countdownEl = document.getElementById("countdown");

const START_DATE = moment("2020-01-22");
const ELAPSED_GAMETIME_IN_MS = 1000 * 60 * 60 * 2; // 2 hours in milliseconds
const intervalId = setInterval(() => {
const TIME_FROM_START = START_DATE.diff(moment());

countdownEl.innerHTML = START_DATE.fromNow(); // This could be modified to show different levels of granularity...

if (TIME_FROM_START < -ELAPSED_GAMETIME_IN_MS) {
countdownEl.innerHTML = "EXPIRED";
clearInterval(intervalId);
} else if (TIME_FROM_START < 0) {
countdownEl.innerHTML = "LIVE";
}
}, 1000);
})();
</script>
</body>
</html>
``````

# Solution 2 :

It looks like an else-statement can resolve your issue.

Try

``````  if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
else {
document.getElementById("demo").innerHTML = "LIVE";
}
``````

# Problem :

I’m new to JavaScript and this website.

I have the following code for an event timer countdown:

My problem really is with an if condition.

``````setInterval(function () {
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
``````

Because my event does not `expire` at the end of the countdown, it ends approximately one hour after starting.

So can someone help me add another condition so that in the interval of that time instead of showing me `Expired`, it shows `Live` or something similar?

Thank you so much!

### Comment posted by dillon

Could you please provide more context of your code? It appears that you’ve only copied a portion of the code in reference.

### Comment posted by codepen.io/iraffleslowd/pen/povGNdo

Hello, I hosted the code in codepen since it was impossible for me to upload it to the site using the integrated editor. Here it is:

### Comment posted by dillon

I’m not sure I understand the anticipated outcome at this point. A useful exercise might be using the

### Comment posted by slowdmelendez360

Thanks for solving the problem. Can you please give me an example with the code working, how about the NFL game? I owe you my life, hahaha.

### Comment posted by dillon

Yeah, no worries. I can update it with a working example.

### Comment posted by slowdmelendez360

It will not work, because the condition is that when it is less than zero it shows: “Expired.” Although in else you say: “else do this” will not, because it has already met the first condition. Anyway, I thank you infinitely for trying to help me.

### Comment posted by dillon

I would have figured this would be the answer given the phrasing of your question. Since you say this doesn’t solve your problem, I must ask what is your intended result? I can’t say that it is clear at this point. @slowdmelendez360

### Comment posted by slowdmelendez360

@CrankyCoder For example, an NFL game that starts on January 22 at 20:00. I must establish that time, right? Then: ** var countDownDate = new Date (“Jan 22, 2020 20:00:00”). getTime (); ** It works perfect, but at the moment my counter arrives at that time specifically (by the if condition) * if (distance <0) { clearInterval (x); document.getElementById ("demo"). innerHTML = "EXPIRED"; } }, 1000); *

### Comment posted by slowdmelendez360

“Expired” will appear on my website, but we know that the game has just begun. Then I want to know how I can tell my js that when it arrives at 20:00 the event has just begun and I want it to show on my website: “LIVE” and that after an hour it shows: “Expired” I hope I have explained myself better. Thank you.

### Comment posted by dillon

Thanks for the detailing further. I understand and have provided a solution. Please update your original question for future readers.