Issue with javascript timer

Question

I wrote a timer code via JavaScript. I want to stop this timer when I click on a button, and restart it by double clicking the same button, however, it currently only works once.

Here is the code:

let pElement = document.createElement('p');
document.body.appendChild(pElement);

let liveTimer = () => {
  let date = new Date();
  let onlineTime = date.toLocaleTimeString();

  pElement.innerHTML = onlineTime;
};

let setI = setInterval(liveTimer, 1000);

function stopTime() {
  clearInterval(setI);
}

function startTimer() {
  setInterval(liveTimer, 1000);
}

<button onclick="stopTime()" ondblclick="startTimer()">click me</button>

Answer 1

You forgot to set the interval-Id the second time you are calling setInterval inside the startTimer function.

Just because you set the value here let setI= setInterval(liveTimer,1000);, doesn't mean that the value will get refreshed when you do setInterval(liveTimer,1000);. This will return a different value that you need to store inside a variable.

let pElement = document.createElement('p');
document.body.appendChild(pElement);


let liveTimer = () => {
  let date = new Date();

  let onlineTime = date.toLocaleTimeString();

  pElement.innerHTML = onlineTime;

};

let setI = setInterval(liveTimer, 1000);

function stopTime() {
  clearInterval(setI);
}


function startTimer() {
  setI = setInterval(liveTimer, 1000);
}

<button onclick="stopTime()" ondblclick="startTimer()">click me</button>