Javascript Countdown Not Iterating Inside C# Foreach Loop

Question

I have written a foreach loop code to iterate through list of products (products are rotating via jquery content slider) and i want to add a javascript countdown inside this loop but the problem is the countdown only appears in the first product of this loop like below:

But when it iterates through other products it is not appearing

Here's my code i have written


        @foreach (var product in Model)
        {
            
                
                    
                    
                
                
                    
                        @product.MainPrice.ToString("N0") تومان
                        
                        @string.Format("{0:N0}", product.DiscountPrice) تومان
                    
                    
                        ٪@Math.Floor((1 - (product.DiscountPrice / product.MainPrice)) * 100) 
                         تخفیف 
                    
                    
                        @product.Name
                    
                    

                    
                        @Html.Raw(product.Description)
                    
                    
                        
                        
                            ::
                                                    
                        زمان باقیمانده تا پایان سفارش
                    
                
            
        }

And this is javascript countdown code

Tieson T. · Accepted Answer

The first, and primary issue, is that you have duplicate ID values in your rendered HTML. That's going to cause issues when you try selecting those elements with getElementById. So, let's fix that first:


    @foreach (var product in Model)
    {
        
            
                
                
            
            
                
                    @product.MainPrice.ToString("N0") تومان
                    
                    @string.Format("{0:N0}", product.DiscountPrice) تومان
                
                
                    ٪@Math.Floor((1 - (product.DiscountPrice / product.MainPrice)) * 100) 
                     تخفیف 
                
                
                    @product.Name
                
                

                
                    @Html.Raw(product.Description)
                
                
                    
                    
                        ::
                                                
                    زمان باقیمانده تا پایان سفارش
                
            
        
    }

I've replaced your id attributes with classes, which we can leverage in the code I'll add below.

Since you've tagged this with jQuery, I've re-written your example to use jQuery rather than vanilla JavaScript:

var remSeconds = Math.floor(@timeRemaining);
var secondsCounter = Math.floor(remSeconds % 60);
var minutesCounter = Math.floor((remSeconds / 60) % 60);
var hoursCounter = Math.floor((remSeconds / 3600));

function formatNumber(number) {
    if (number < 10)
        return '0' + number;
    else
        return '' + number;
}

function startTimers(){

    // The variables prefixed with `$` represent jQuery objects. Using $ isn't necessary, but it 
    // makes it a bit more obvious that it's not a "data" variable

    // This will select all elements with the class 'countdown-timer'
    var $timers = $('.countdown-timer');

    // See https://api.jquery.com/each/
    $timers.each(function(){
        // `this` is the current `.countdown-timer` being iterated by jQuery.each()
        var $timer = $(this);

        var $seconds = $timer.find('.secRemaining');
        var $minutes = $timer.find('.minRemaining');
        var $hours = $timer.find('.hrRemaining');

        $seconds.text(formatNumber((econdsCounter));
        $minutes.text(formatNumber(minutesCounter));
        $hours.text(formatNumber(hoursCounter));

        var _tick = setInterval(function () {
            if (remSeconds > 0) {
                if (hoursCounter > 0) {
                    if (minutesCounter == 0) {
                        minutesCounter = 60;
                        hoursCounter = hoursCounter - 1;
                    }
                }

                if (secondsCounter == 0) {
                    secondsCounter = 60;
                    minutesCounter = minutesCounter - 1;
                }

                secondsCounter = secondsCounter - 1;
                remSeconds = remSeconds - 1;

                $seconds.text(formatNumber((econdsCounter));
                $minutes.text(formatNumber(minutesCounter));
                $hours.text(formatNumber(hoursCounter));                    
            } else {
                clearInterval(_tick);
                //document.getElementById("tRemaining").innerHTML = "EXPIRED";
            }
        }, 1000);
    }
}

startTimers();

So, a review of the changes:

I added a class called countdown-timer to the
elements which you use to contain your hours, minutes, and seconds elements.
I switched the id attributes for class attributes, which lets us re-use our "selectors" - the classes that identify our timer elements
I renamed the function to startTimers, but that's just because (to me) it more accurately describes the function's usage.
Within startTimers, I use jQuery to select each of the timer elements (denoted by countdown-timer), which will return something I can treat as an array.
I then use the $('selector').each() function to iterate through the array of timers, setting the matching element's text values and kicking off the setInterval loops.

Javascript Countdown Not Iterating Inside C# Foreach Loop

Answers (2)

Related Questions