Wordpress Update Javascript Stopwatch-CodePudding

I have this javascript stopwatch that is working. The function is when user click start button to start and pause button to pause the stopwatch. The variable stopwatch is saved in localStorage and when user refresh the website and click start again the stopwatch continue from the last stopwatch time 1; The first timer is working, but I will have an array of the same containers, fetching from a Database containing stopwatch time. The problem is with my loop. How can I add the timer for each individual timer container and continue from the time it was last saved 1 and continue from there. I am providing an example maybe someone can help me.

HTML

<div >
    <h2 >Time Tracker</h2>
    <button >Start</button>
    <button >Pause</button>
    <button >Clear</button>
    <div >00:34:21</div>
</div>

<div >
    <h2 >Time Tracker</h2>
    <button >Start</button>
    <button >Pause</button>
    <button >Clear</button>
    <div >21:56:22</div>
</div>

<div >
    <h2 >Time Tracker</h2>
    <button >Start</button>
    <button >Pause</button>
    <button >Clear</button>
    <div >32:47:35</div>
</div>

<div >
    <h2 >Time Tracker</h2>
    <button >Start</button>
    <button >Pause</button>
    <button >Clear</button>
    <div >11:29:03</div>
</div>

<div >
    <h2 >Time Tracker</h2>
    <button >Start</button>
    <button >Pause</button>
    <button >Clear</button>
    <div >04:01:14</div>
</div>

    let showTime = document.querySelector(".output");
    let startTimeButton = document.querySelector(".start")
    let pauseTimeButton = document.querySelector(".pause")

    let seconds = 0;
    let interval = null;
    if (localStorage.getItem("stopwatchSeconds") != null) {
        seconds = parseInt(localStorage.getItem("stopwatchSeconds"));
    }

    const timer = () => {
        seconds  ;

        localStorage.setItem("stopwatchSeconds", seconds);


        // Get hours
        let hours = Math.floor(seconds / 3600);
        // Get minutes
        let minutes = Math.floor((seconds - hours * 3600) / 60);
        // Get seconds
        let secs = Math.floor(seconds % 60);

        if (hours < 10) {
            hours = `0${hours}`;
        }
        if (minutes < 10) {
            minutes = `0${minutes}`;
        }
        if (secs < 10) {
            secs = `0${secs}`;
        }

        showTime.innerHTML = `${hours}:${minutes}:${secs}`;

    };

    startTimeButton.addEventListener("click", () => {
        pauseTimeButton.style.display = "block";
        startTimeButton.style.display = "none";
        console.log("START TIME CLICKED");

        if (interval) {
            return;
        }

        interval = setInterval(timer, 1000);
    });

    // Pause function
    pauseTimeButton.addEventListener("click", () => {
        pauseTimeButton.style.display = "none";
        startTimeButton.style.display = "block";
        console.log("PAUSE TIME CLICKED");
        clearInterval(interval);
        interval = null;

    });

CodePudding user response：

You can do something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="container"></div>
  </body>

  <script>
    let container = document.querySelector("#container");
    let databaseWatchesCount = 4;
    const addWatches = () => {
      for (let i = 0; i < databaseWatchesCount; i  ) {
        container.insertAdjacentHTML(
          "beforeend",
          `<div >
                       <h2 >Time Tracker</h2>
                       <button id="start-${i}" onclick="startTimer(this.id)">Start</button>
                       <button id="pause-${i}" onclick="pauseTimer(this.id)">Pause</button>
                       <button id="clear-${i}">Clear</button>
                       <div id="output-${i}"></div>
                   </div>`
        );
      }
    };
    let interval = [];

    let seconds = [];

    const startTimer = (id) => {
      let ID = id.slice(-1);

      if (localStorage.getItem(`stopwatchSeconds-${id}`) != null) {
        seconds[ID] = parseInt(localStorage.getItem(`stopwatchSeconds-${id}`));
      }

      //   intervals[ID] = null;

      const timer = () => {
        localStorage.setItem(`stopwatchSeconds-${id}`, seconds[ID]);

        seconds[ID]  ;

        // Get hours
        let hours = Math.floor(seconds[ID] / 3600);
        // Get minutes
        let minutes = Math.floor((seconds[ID] - hours * 3600) / 60);
        // Get seconds
        let secs = Math.floor(seconds[ID] % 60);

        if (hours < 10) {
          hours = `0${hours}`;
        }
        if (minutes < 10) {
          minutes = `0${minutes}`;
        }
        if (secs < 10) {
          secs = `0${secs}`;
        }

        showTime = document.getElementById(`output-${ID}`);

        showTime.innerHTML = `${hours}:${minutes}:${secs}`;
      };

      if (interval[ID]) {
        return;
      }

      interval[ID] = setInterval(timer, 1000);
    };

    function pauseTimer(id) {
      let ID = id.slice(-1);
      clearInterval(interval[ID]);
      interval[ID] = null;
    }

    addWatches();
  </script>
</html>

CodePudding user response：

You can try this snippet

Html

<div  data-watch_no="01">
  <h2 >Time Tracker 01</h2>
  <button >Start</button>
  <button >Pause</button>
  <button >Clear</button>
  <div ></div>
</div>

<div  data-watch_no="02">
  <h2 >Time Tracker 02</h2>
  <button >Start</button>
  <button >Pause</button>
  <button >Clear</button>
  <div ></div>
</div>

Vanilla JS

let stop_watch_containers = document.querySelectorAll(".c-add-task-main-container");

stop_watch_containers.forEach((container) => {

    let start_button = container.querySelector(".start");
    let pause_button = container.querySelector(".pause");
    let clear_button = container.querySelector(".clear");
    let output = container.querySelector(".output");
    let localStorageKey = "watch"   container.dataset.watch_no;
    let seconds = localStorage.getItem(localStorageKey);

    if (isNaN(seconds)) {
        seconds = 0;
    }

    // set old time on page load
    output.innerHTML = timer();

    let interval;

    // start watch
    start_button.addEventListener("click", function () {
        clearInterval(interval);
        interval = setInterval(function () {
        output.innerHTML = timer();
        seconds  ;
        }, 1000);
    });

    // pause watch
    pause_button.addEventListener("click", function () {
        clearInterval(interval);
        localStorage.setItem(localStorageKey, seconds);
    });

    // clear watch
    clear_button.addEventListener("click", function () {
        clearInterval(interval);
        seconds = 0;
        output.innerHTML = timer();
        localStorage.setItem(localStorageKey, 0);
    });

    function timer() {
        let hours = Math.floor(seconds / 3600);
        // Get minutes
        let minutes = Math.floor((seconds - hours * 3600) / 60);
        // Get seconds
        let secs = Math.floor(seconds % 60);

        if (hours < 10) {
        hours = `0${hours}`;
        }
        if (minutes < 10) {
        minutes = `0${minutes}`;
        }
        if (secs < 10) {
        secs = `0${secs}`;
        }
        return `${hours}:${minutes}:${secs}`;
    }
});