Solved - multiple timers

Question

How to make multiple countdown timers at the same page using the codes below? I tried to make another countdown timer by making another var start = document.getElementById("start2"); and var dis = document.getElementById("display2"); but when I click the 1 button only the second countdown timer is working,

 var start1 = document.getElementById("start1"); var dis1 = document.getElementById("display1"); var finishTime1; var timerLength1 = 10; var timeoutID1; dis1.innerHTML = "" + timerLength1; if(localStorage.getItem('myTime')){ Update(); } start1.onclick = function () { localStorage.setItem('myTime', ((new Date()).getTime() + timerLength1 * 1000)); if (timeoutID1 != undefined) window.clearTimeout(timeoutID1); Update(); } function Update() { finishTime1 = localStorage.getItem('myTime'); var timeLeft = (finishTime1 - new Date()); dis1.innerHTML = "" + Math.max(timeLeft/1000,0) timeoutID1 = window.setTimeout(Update, 100); } var start2 = document.getElementById("start2"); var dis2 = document.getElementById("display2"); var finishTime2; var timerLength = 100; var timeoutID; dis2.innerHTML = "" + timerLength; if(localStorage.getItem('myTime')){ Update(); } start2.onclick = function () { localStorage.setItem('myTime', ((new Date()).getTime() + timerLength * 1000)); if (timeoutID != undefined) window.clearTimeout(timeoutID); Update(); } function Update() { finishTime2 = localStorage.getItem('myTime'); var timeLeft = (finishTime2 - new Date()); dis2.innerHTML = "" + Math.max(timeLeft/1000,0) timeoutID = window.setTimeout(Update, 100); }

 <span id="display2"></span><button id="start1">START1</button> <br><br> <span id="display2"></span><button id="start1">START1</button>

    enter code here

Answer 1

You are using the same id for localStorage . Actually it is better to create isolated context through function or class, then it will be easier to handle as much counters as you wish. Also you can use setInterval instead of setTimer

One more tip: when you assign number to string field no need to write "" + value, because number authomatically will be converted into string

const createCounter = (startElementId, displayElementId, localStorageId, timerLength) => {
   const startElement = document.getElementById(startElementId),
      displayElement = document.getElementById(displayElementId)
      
   let timeoutID

   displayElement.innerHTML = timerLength
   
   const storageValue = localStorage.getItem(localStorageId)
   if (storageValue) startTimer()

   startElement.onclick = () => {
      const value = (new Date()).getTime() + timerLength * 1000
      localStorage.setItem(localStorageId, value)
      startTimer()
   }
   
   function startTimer () {
      if (timeoutID) clearInterval(timeoutID)
      timeoutId = setInterval(updateTime, 100)
   }

   function updateTime (finishTime) {
      finishTime = finishTime || localStorage.getItem(localStorageId)
      const timeLeft = finishTime - new Date()
      displayElement.innerHTML = Math.max(timeLeft / 1000, 0)
   }      
}

// run first timer for elements with ids start1 and display1
createCounter('start1', 'display1', 'someId1', 10)

// run second timer for elements with ids start1 and display1
createCounter('start2', 'display2', 'someId2', 60)

html

<button id=start1>Start</button>
<div id=display1></div>

<button id=start2>Start</button>
<div id=display2></div>