Bollate

HTML

[ANSWERED] javascript – Problem with the countdown timer JS – IF Condition

By

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">
    <head>
        <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>
    </head>
    <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:

https://codepen.io/iraffleslowd/pen/povGNdo

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!

Comments

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.

By

Related Post

HTML

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022
HTML

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022
HTML

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022