Why JavaScript see NaN?

@MichalOravec How to use this?

@MichalOravec Careful you don’t catch Oxbiritis.

@kokoshneta I know it's him.

@MichalOravec You only know how to tease me like little children.

@Ashish123 Wtf. This is not a dating site. Reported

@piljac1

blade

@foreach($products as $product)
	<p class="timestamp">{{ $product->timestamp }}</p>
@foreach

js

<script src="{{ asset('themes/js/jquery-3.6.1.min.js') }}"></script>
<script>
    String.prototype.toHHMMSS = function() {
        let sec_num = parseInt(this, 10);
        let hours = Math.floor(sec_num / 3600);
        let minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        let seconds = sec_num - (hours * 3600) - (minutes * 60);
        if (hours < 10) {
            hours = "0" + hours;
        }
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        console.log(hours + " : " + minutes + " : " + seconds)
        return hours + " : " + minutes + " : " + seconds;
    }
        
    let timestamps = document.getElementsByClassName("timestamp");
    Array.from(timestamps).forEach(function(timestamp, index) {
        setInterval(() => {
            let curTime = (new Date()).getTime() / 1000;
            document.getElementsByClassName('timestamp')[index].innerText = (`${timestamp-curTime}`).toHHMMSS();
        }, 1000)
    });
</script>

@webaxin I'm assuming you want to display the elapsed time between the timestamp and now?

If so, there are multiple things wrong with your code, but I'm on my cellphone in bed right now. So I'll answer on my laptop during my lunch break if nobody did by then.

@piljac1 Ok, God bless you.

@webaxin Copy the data into a jsfiddle so we can actually see the problem. I cannot recreate it by manually using the function

https://jsfiddle.net/95dy7nu0/

@Sinnbeck

God bless you.

Now how to display and show in my body.

@Sinnbeck

Can you help me?

@webaxin Where is the link to your jsfiddle?

Copy the data into a jsfiddle so we can actually see the problem.

@Sinnbeck https://jsfiddle.net/irankhosravi/qm0d6sb9/

In admin, I saved one to 2 and one to 1. I saved it with the timestamp method. It means one hour in the future and two hours in the future. So it should be shown like this. If I hit 1, it should show 00:59:59. And when I hit 2, it should show 01:59:59.

@webaxin So it's something like this you need?

I suggest using Carbon and do it with php instead of with javaScript {{ $comment->created_at->diffForHumans() }}

function elapsed(time) {
        let sec_num = parseInt(time / 1000 );
        let hours = Math.floor(sec_num / 3600);
        let minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        let seconds = sec_num - (hours * 3600) - (minutes * 60);
        if (hours < 10) {
            hours = "0" + hours;
        }
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        return hours + " : " + minutes + " : " + seconds;
    }
        
    let timestamps = document.getElementsByClassName("timestamp");
    
    for (let i = 0; i < timestamps.length; i++) {
	  let curTime = Date.now() / 1000;
      timestamps.item(i).textContent = elapsed(curTime - parseInt(timestamps.item(i).textContent));
    }
    ```

@Tray2

Your code is not working. I want seconds to change every second and minutes to change every minute and hours to change every hour. But the code you wrote is fixed.

@Sinnbeck Can you help me?

@webaxin If I properly understood what you want, this should do the trick.

@foreach($products as $product)
	<p data-timestamp="{{ $product->timestamp }}"></p>
@foreach

String.prototype.toHHMMSS = function() {
  const sec_num = parseInt(this, 10);
  let hours = Math.floor(sec_num / 3600);
  let minutes = Math.floor((sec_num - (hours * 3600)) / 60);
  let seconds = sec_num - (hours * 3600) - (minutes * 60);

  if (hours < 10) {
    hours = "0" + hours;
  }

  if (minutes < 10) {
    minutes = "0" + minutes;
  }

  if (seconds < 10) {
    seconds = "0" + seconds;
  }

  return hours + " : " + minutes + " : " + seconds;
}

const timestamps = document.querySelectorAll('[data-timestamp]');

timestamps.forEach(function(timestamp) {
  setInterval(() => {
    const curTime = (new Date()).getTime() / 1000;

    timestamp.innerText = (`${curTime - timestamp.dataset.timestamp}`).toHHMMSS();
  }, 1000);
});

To see the code in action, check out this CodePen

Changes made / explanation

1. Changed unmodified variables from let to const.
2. Swaped the timestamp class for a data-timestamp attribute, because it gives you the possibility to alter the paragraph's text content without losing the original timestamp.
3. Swaped getElementsByClassName for querySelectorAll to be able to target the data attribute.
4. Removed unnecessary Array.from and index.
5. Removed unnecessary DOM elements refetching.
6. Swapped the timestamp value with the curTime to get the appropriate time ellapsed since the timestamp.

P.S. If your JS code won't be compiled, make sure to change let and const with var and avoid arrow functions (and possibly use a for instead of forEach if you want to support below IE 11).

@webaxin The code is working fine. The reason I removed the interval is that it would only work the first time, when the data is in timestamp format, on the second iteration it would be in 01:05:05 format and not 1758665.

@piljac1

God bless you.

Thanks for your answer.