how to create countdown timer using JavaScript in asp.net core?

Question

I'm tying to create a countdown timer for online test using JavaScript in asp.net core. I want it to change every 1 second without refreshing the page. when I run the program it doesn't show me the countdown.

This my javascript code:

<script type="text/javascript">
    countdown = function () {
    var current = parseInt(document.getElementById("timerLabel").innerHTML);
    document.getElementById("left").innerHTML = current;
    if (current > 0) {
        setTimeout('countdown()', 1000); // run every second
    }}

This is my view: I used foreach loop to show this.

 <div class="panel-footer">
            <p>   @item.Grade</p>
            <p>  @item.StartTime</p>
            <p id="EndTime">  @item.EndTime</p>
            <span id="timerLabel">@ViewBag.LeftTime</span>
            <p id="left"></p>
        </div>

mplungjan · Accepted Answer · 2021-01-30 08:06:49Z

2

Do not get the timerLabel value inside the function unless you also set it
Use interval and clear it when done

let current = parseInt(document.getElementById("timerLabel").innerHTML);
const countdown = function() {
  document.getElementById("left").innerHTML = --current || "Done"; // using current when 0 it is false
  if (current <= 0) clearTimeout(tId); // stop the interval
};
const tId = setInterval(countdown, 1000)

<span id="timerLabel">10</span>
<p id="left"></p>

answered Jan 30, 2021 at 8:06

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

niki tmb Over a year ago

Thank you.It works. but how can I use my own left time dynamically from database?

mplungjan Over a year ago

My code will work with your @ViewBag.LeftTime My 10 is just an example

mplungjan Over a year ago

Assuming @ViewBag.LeftTime is in seconds - if not let me know

niki tmb Over a year ago

my code does't work with viewbag but it works with 10.

mplungjan Over a year ago

The please tell me what view source shows in that p

|

Collectives™ on Stack Overflow

how to create countdown timer using JavaScript in asp.net core?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related