How to call a javascript function inside a loop

Question

How to call a javascript function like a "onload"?

I mean. I'm trying to call a CountDownTimer() function but I don't know how to do it. Can someone help me?

Ps. The javascript function is working fine.

At my view I'm trying this way:

 @foreach (var item in Model.pedidosAberto)
    {
        <div class="col-lg-6 mb-4">
            <a href="#" data-toggle="modal" data-id="@item.IdPedido" data-partial="_AbertoPartial"
               data-modal="#Modal" class="card bg-success text-white text-decoration-none">
                <div class="card-body">
                    <div class="float-right">
                        <div id="[email protected]"></div>
                        <script type="text/javascript">
                             CountDownTimer('06/12/2021 4:45 PM', '[email protected]');
                        </script>
                    </div>
                </div>
            </a>
        </div>
    }

At the same view I have this:

@section scripts{
<script type="text/javascript">
    $(document).ready(function () {

        //CountDownTimer('06/12/2021 4:45 PM', 'countdown');

        function CountDownTimer(dt, id) {
            var end = new Date(dt);
            alert(end);

            var _second = 1000;
            var _minute = _second * 60;
            var _hour = _minute * 60;
            var _day = _hour * 24;
            var timer;

            function showRemaining() {
                var now = new Date();
                var distance = end - now;
                if (distance < 0) {

                    clearInterval(timer);
                    document.getElementById(id).innerHTML = 'EXPIRED!';

                    return;
                }
                //var days = Math.floor(distance / _day);
                var hours = Math.floor((distance % _day) / _hour);
                var minutes = Math.floor((distance % _hour) / _minute);
                var seconds = Math.floor((distance % _minute) / _second);

                //document.getElementById(id).innerHTML = days + 'days ';
                document.getElementById(id).innerHTML = hours + ':';
                document.getElementById(id).innerHTML += minutes + ':';
                document.getElementById(id).innerHTML += seconds;
            }

            timer = setInterval(showRemaining, 1000);
        }
    });
</script>

CountDownTimer is not exposed globally because it's defined in the function passed to ready(). Remove $(document).ready(function () { and });. Note that your count down may not work as you'd like, because a) the format of the date you're passing to new Date(string) is not one of the formats defined in the spec and therefore is dependent on the browser and b) the element with the id may not exist yet (although it should, since you don't call showRemaining for a second). — Heretic Monkey
– Heretic Monkey, Commented May 12, 2021 at 21:40
A better way would be to add a class 'countdown' to all of the countdown elements. From within your function, get all the countdown elements, and then call the function. As for the data you want to pass to the function, you can stick that in some attribute of the countdown element. $('.countdown').each(function(){ ..get the data for $(this) here and call the function. }); — hijinxbassist
– hijinxbassist, Commented May 12, 2021 at 21:47

hijinxbassist · Accepted Answer · 2021-05-12 22:07:29Z

1

You can get the countdown elements from your existing script, no need for an endless amount of scripts embedded in your html markup.

First add a class to your countdown elements

<div id="[email protected]" class="countdown"></div>

If you have a specific date string for each element, you can add a data attribute to hold that string, which you can retrieve when you go to run the function.

<div id="[email protected]" class="countdown" data-date="06/12/2021 4:45 PM"></div>

Then inside of your existing document ready function, get all of the countdown elements and run the function for each one using the data from that element.

$(document).ready(function () {
    $('.countdown').each(function() {
        var dateString = $(this).attr('data-date');
        var thisId = $(this).attr('id');

        CountDownTimer(dateString, thisId);
    }
    
    // existing code....
}

edited May 12, 2021 at 22:07

answered May 12, 2021 at 21:54

hijinxbassist

4,7961 gold badge21 silver badges29 bronze badges

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

Comments

Peter B · Accepted Answer · 2021-05-12 21:41:45Z

You are defining function CountDownTimer(....) within the anonymous function that is inside the $(document).ready() call. As a result the CountDownTimer function is only known during the execution of the anonymous function, and it ceases to exist when the anonymous function ends, meaning that the script inside your <div> can't find it when it tries.

To fix this, take CountDownTimer out of the $(document).ready() call - or if that is all there is in it, then consider just removing the $(document).ready() call.

So instead of this:

<script type="text/javascript">
    $(document).ready(function () {
        //CountDownTimer('06/12/2021 4:45 PM', 'countdown');

        function CountDownTimer(dt, id) {
            // ...
        }
    });
</script>

... do this:

<script type="text/javascript">
    function CountDownTimer(dt, id) {
        // ...
    }

    $(document).ready(function () {
        //CountDownTimer('06/12/2021 4:45 PM', 'countdown');
    });
</script>

Collectives™ on Stack Overflow

How to call a javascript function inside a loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related