CODEWITHSUNDEEP
javascript
tyler durden
tyler durden

Reputation: 63

javascript iterating over a collection and populating a set of values

enter image description herei have a collection of dates (including time) i need to iterate over the collection and plug in the right dates and times according to the date that the user inputs. at the end of the html document obviously i have javascript; the js will iterate over the table and plug in the right dates

so if one date happens to be before today the date counters will show negative (i will take care of zero-ing it out later) but if the date is in the future the timers should show the right times..

the problem i am facing with this application is that the dates are showing the same for the collection of dates. so it doesnt matter if i have 100 dates in my collection or 1 the timer will show the same dates on the timer.

i am not executing the for each collection the right way.. and i am not grabbing the classNames right either. i guess thats why the dates in the timer are showing the same. so its grabbing the first date the js can grab and populating all the timers with the same date 

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <meta name="Author" content="" />

</head>

<body>
    <section>
        <table>
            <tr>
                <td class="for-sale-heading">
                    <h4>End Date:&nbsp;</h4>
                    <h5 class="time">04-30-22 15:00:00</h5>
                </td>
                <td class="for-sale-heading">
                    <div class="clock">
                        <div>
                            <span class="day"></span>
                            <div class="local-date">Days</div>
                        </div>
                        <div>
                            <span class="hour"></span>
                            <div class="local-date">Hours</div>
                        </div>
                        <div>
                            <span class="minute"></span>
                            <div class="local-date">Minutes</div>
                        </div>
                        <div>
                            <span class="second"></span>
                            <div class="local-date">Seconds</div>
                        </div>
                    </div>
                    <p class="closed"></p>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td class="for-sale-heading">
                    <h4>End Date:&nbsp;</h4>
                    <h5 class="time">04-30-20 15:00:00</h5>
                </td>
                <td class="for-sale-heading">
                    <div class="clock">
                        <div>
                            <span class="day"></span>
                            <div class="local-date">Days</div>
                        </div>
                        <div>
                            <span class="hour"></span>
                            <div class="local-date">Hours</div>
                        </div>
                        <div>
                            <span class="minute"></span>
                            <div class="local-date">Minutes</div>
                        </div>
                        <div>
                            <span class="second"></span>
                            <div class="local-date">Seconds</div>
                        </div>
                    </div>
                    <p class="closed"></p>
                </td>
            </tr>
        </table>
    </section>
    <script type="application/javascript">
        $(document).ready(function() {
            const timeClasses = document.getElementsByClassName("time");
            Array.prototype.forEach.call(timeClasses, function(timeClass) {
                const x = setInterval(function() {
                    // const innerHtml1 = $('.time').html();
                    const innerHtml = timeClass.innerHTML;

                    const deadline = new Date(innerHtml.toString()).getTime();
                    const now = new Date().getTime();
                    const t = deadline - now;
                    const days = Math.floor(t / (1000 * 60 * 60 * 24));
                    const hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    const minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
                    const seconds = Math.floor((t % (1000 * 60)) / 1000);
                    const spanElements = document.getElementsByTagName("span");
                    Array.prototype.forEach.call(spanElements, function(spanElement) {
                        // console.log(el.className);
                        // console.log(el.getElementsByClassName);
                        switch (spanElement.className) {
                            case "day":
                                //                            console.log("day");
                                $('.day').html(days); // or use el.innerHTML = days;
                                break;
                            case "hour":
                                //                            console.log("hour");
                                $('.hour').html(hours); // or use el.innerHTML = hours;
                                break;
                            case "minute":
                                //                            console.log("minute");
                                $('.minute').html(minutes); // or use el.innerHTML = minutes;
                                break;
                            case "second":
                                //                            console.log("second");
                                $('.second').html(seconds); // or use el.innerHTML = seconds;
                                break;
                        }
                    });

                }, 1000);
            });
        });
    </script>
</body></html>

Upvotes: 0

Views: 38

Answers (1)

PeterSH
PeterSH

Reputation: 475

numbers flashing

You are using the setInterval method with a delay of zero miliseconds, it tries to refresh the number as fast as it can (why the numbers appear to be flashing).

const x = setInterval(function() {
    // code here,
    0 // <-- delay
});

If you set the delay to a larger number (e.g. 1000 miliseconds) the numbers stop flashing

const x = setInterval(function() {
    // code here,
    1000 // <-- delay
});

numbers being the same

You are referencing the classname for setting the numbers in the html

$('.day').html(days);

This won't work because the elements for each date have the same class names, you need to use ID's to reference to the correct element.

See this JSFiddle for an example: https://jsfiddle.net/2qf30v9m/

Upvotes: 1

Related Questions