How do I use the same id more than once with getElementById()?

Question

Hey, guys. All right?

I have a chronometer that is in javascript and I want it to appear more than once on a specific page.

The problem is that it works only the first time it appears on the page.

I imagine it’s because of the ids that are duplicated on the html page (id="days" id="hours" id="minutes" id="Seconds") when I try to duplicate the second stopwatch. But if I want to call the timers I need to use these ids.

To try to get around the problem I tried using getElementsByClassName() instead of getElementById(). So I could use classes instead of ids in my HTML. So, I could call the javascript code through the class more than once, no problem. However, my code did not work with getElementsByClassName(). The timer simply does not appear when I try to use this function.

Does anyone have any solution for this stopwatch to work more than once on the same page?

var today = new Date();
var dd = String(today.getDate() + 1).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();

today = mm + ' ' + dd + ', ' + yyyy;
const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;

let countDown = new Date(today).getTime(),
    x = setInterval(function() {

      let now = new Date().getTime(),
          distance = countDown - now;

      document.getElementById('days').innerText = Math.floor(distance / (day)),
        document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
        document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
        document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
      
    }, second)

<div class="conteiner-countdown-loop">
  <ul>
    <li class="countdown-loop"><span id="days"></span>dias</li>
    <li class="countdown-loop"><span id="hours"></span>Horas</li>
    <li class="countdown-loop"><span id="minutes"></span>Minutos</li>
    <li class="countdown-loop"><span id="seconds"></span>Segundos</li>
  </ul>
</div>

Answer 1

Solutions have many, but with the JS you are using, the ID is required
(but has an alternative with class in the end).

You can number the Ids:

<li class="countdown-loop"><span id="days1"></span> Dias</li>
...
<li class="countdown-loop"><span id="days2"></span> Dias</li>
...
<li class="countdown-loop"><span id="days3"></span> Dias</li>
...

And when updating, use a loop:

for (var i = 1; i <= 3; i++ ) {
  document.getElementById('days' + i).innerText = Math.floor(distance / (day)),
  //                             ^-- note a concatenação
  ...

Probably you will use different times in each stopwatch, then you just change the time reference in each loop iteration, whether with an array or any other technique, but this escapes the question problem, which was solved with the loop. Programming, after all, is this, figuring out how to use language resources to solve the task.

Demonstration:

var today = new Date();
var dd = String(today.getDate() + 1).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();

today = mm + ' ' + dd + ', ' + yyyy;
const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;

let countDown = new Date(today).getTime(),
    x = setInterval(function() {

      let now = new Date().getTime(),
          distance = countDown - now;

      for (var i = 1; i <= 3; i++ ) {
        document.getElementById('days'+i).innerText = Math.floor(distance / (day)),
        document.getElementById('hours'+i).innerText = Math.floor((distance % (day)) / (hour)),
        document.getElementById('minutes'+i).innerText = Math.floor((distance % (hour)) / (minute)),
        document.getElementById('seconds'+i).innerText = Math.floor((distance % (minute)) / second);
      }
    }, second)

<div class="conteiner-countdown-loop">
  <ul>
    <li class="countdown-loop"><span id="days1"></span> Dias</li>
    <li class="countdown-loop"><span id="hours1"></span> Horas</li>
    <li class="countdown-loop"><span id="minutes1"></span> Minutos</li>
    <li class="countdown-loop"><span id="seconds1"></span> Segundos</li>
  </ul>
  <ul>
    <li class="countdown-loop"><span id="days2"></span> Dias</li>
    <li class="countdown-loop"><span id="hours2"></span> Horas</li>
    <li class="countdown-loop"><span id="minutes2"></span> Minutos</li>
    <li class="countdown-loop"><span id="seconds2"></span> Segundos</li>
  </ul>
  <ul>
    <li class="countdown-loop"><span id="days3"></span> Dias</li>
    <li class="countdown-loop"><span id="hours3"></span> Horas</li>
    <li class="countdown-loop"><span id="minutes3"></span> Minutos</li>
    <li class="countdown-loop"><span id="seconds3"></span> Segundos</li>
  </ul>
</div>

If the timers are the same, you can use class:

Note that the getElementsByClassName returns multiple elements, you need to iterate on them.

var today = new Date();
var dd = String(today.getDate() + 1).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();

today = mm + ' ' + dd + ', ' + yyyy;
const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;

let countDown = new Date(today).getTime(),
    x = setInterval(function() {
      let now = new Date().getTime(),
          distance = countDown - now,
          spanSeconds = document.getElementsByClassName('seconds'),
          i = spanSeconds.length,
          valueSeconds = Math.floor((distance % (minute)) / second);
  
      while(i--) spanSeconds[i].innerText = valueSeconds;
    }, second)

<div class="conteiner-countdown-loop">
  <ul>
    <li class="countdown-loop"><span class="seconds"></span> Segundos</li>
  </ul>
  <ul>
    <li class="countdown-loop"><span class="seconds"></span> Segundos</li>
  </ul>
  <ul>
    <li class="countdown-loop"><span class="seconds"></span> Segundos</li>
  </ul>
</div>

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName