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="countdown_@item.IdPedido"></div>
                        <script type="text/javascript">
                             CountDownTimer('06/12/2021 4:45 PM', 'countdown_@item.IdPedido');
                        </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>

Answer 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="countdown_@item.IdPedido" 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="countdown_@item.IdPedido" 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....
}

Answer 2

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>