0

This is a timer. One of the timers is 58 minutes and the other one is 49 hours

timer

The timer was 58 minutes. When the clock reaches 00:00:00, both of them will be as below.

end

I want to change those that reached the timer 0, what should I do?

It is possible that both of them will reach 0, so I have to make a forEach.

I want to make it show the end of the discount when it reaches 0.

HTML

<div class="card-footer text-center text-secondary end-discount d-none">End of Discount</div>
<p data-timestamp="1671524779" class="timestamp fw-bolder text-danger text-end mb-0" dir="ltr"></p>
<div class="card-footer text-center text-secondary end-discount d-none">End of Discount</div>
<p data-timestamp="1671524779" class="timestamp fw-bolder text-danger text-end mb-0" dir="ltr"></p>
<div class="card-footer text-center text-secondary end-discount d-none">End of Discount</div>
<p data-timestamp="1671524779" class="timestamp fw-bolder text-danger text-end mb-0" dir="ltr"></p>
<div class="card-footer text-center text-secondary end-discount d-none">End of Discount</div>
<p data-timestamp="1671524779" class="timestamp fw-bolder text-danger text-end mb-0" dir="ltr"></p>

JS

const timestamps = document.querySelectorAll('[data-timestamp]');
timestamps.forEach(function(timestamp) {
    setInterval(() => {
        const curTime = (new Date()).getTime() / 1000;
        timestamp.innerText = (`${timestamp.dataset.timestamp - curTime}`).toHHMMSS();
        if (timestamp.innerText === '00 : 00 : 00') {
            const end_discounts = document.querySelectorAll('.end-discount');
            end_discounts.forEach((end_discount) => {
                end_discount.classList.remove('d-none');
                end_discount.classList.add('d-block');
            });
Mahmoud Khoravi
  • 145
  • 8
  • What is `.toHHMMSS()`? – Barmar Dec 20 '22 at 05:48
  • `document.querySelectorAll('.end-discount')` selects ALL such elements - try `timestamp.querySelectorAll('.end-discount')` assuming each `timestamp` is a parent of each `.end-discount` - if not, then you may need to `timestamp.parentElement.querySelectorAll` .... or even more `.parentElement` ... actually, in either case you'll probably only need `.querySelector` since there's only likely one `.end-discount` associated with each `timestamp` .... add your HTML to the question – Jaromanda X Dec 20 '22 at 05:53
  • @Barmar https://stackoverflow.com/questions/6312993/javascript-seconds-to-time-string-with-format-hhmmss – Mahmoud Khoravi Dec 20 '22 at 05:55
  • Can you please explain what is going wrong with your current code. Notice, that if your String monkeypatch is exactly the same as in the accepted answer of the linked post, the `if` condition never passes, the string returned from `.toHHMMSS` doesn't contain spaces. – Teemu Dec 20 '22 at 06:12
  • I changed the code to `timestamp.parentElement.querySelectorAll('.end-discount');` the timers were hidden but the end of the discount didn't show for me. – Mahmoud Khoravi Dec 20 '22 at 06:17
  • There's no `data-timestamp` in the HTML you added. And the JS has unmatched brackets. It's not an [mre] if you leave out critical parts like that. – Barmar Dec 20 '22 at 06:23
  • I added `data-timestamp ` – Mahmoud Khoravi Dec 20 '22 at 06:28

0 Answers0