why multiple time 'timer' not working in javascript

Question

I need to timer one more time on my landing pages, but when I try to use one more time then just show the first one, the rest of the number of timers not show.

I have tried a lot of times, I don't know where is problem.

show me like this:

but I need like this one more time:

I have tried like this way:

js file:

// time start
var deadline = new Date("june 07, 2021, 07:49:25").getTime();
var x = setInterval(function () {
  var currentTime = new Date().getTime();
  var t = deadline - currentTime;
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  var hours = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((t % (1000 * 60)) / 1000);
  document.getElementById("day").innerHTML = days;
  document.getElementById("hour").innerHTML = hours;
  document.getElementById("minute").innerHTML = minutes;
  document.getElementById("second").innerHTML = seconds;
  if (t < 1) {
    clearInterval(x);
    document.getElementById("time-up").innerHTML = "";
    document.getElementById("day").innerHTML = "0";
    document.getElementById("hour").innerHTML = "0";
    document.getElementById("minute").innerHTML = "0";
    document.getElementById("second").innerHTML = "0";
  }
}, 1000);

// time end

css file:

/*time start*/
.timer {
  font-family: sans-serif;
  color: #fff;
  display: inline-block;
  font-weight: 100;
  text-align: center;
  font-size: 16px;
}
.timer div {
  border-radius: 20px;
  background: #000000f7;
  display: inline-block;
  font-family: Oswald;
  font-size: 52px;
  font-weight: 400;
  width: 96px;
  margin-right: 11px;
}
.timer .smalltext {
  color: #ffffff;
  font-size: 19px;
  font-family: Poppins;
  font-weight: 500;
  display: block;
  padding: 0;
  width: auto;
  margin-top: -11px;
}
.timer #time-up {
  margin: 8px 0 0;
  text-align: left;
  font-size: 14px;
  font-style: normal;
  color: #000000;
  font-weight: 500;
  letter-spacing: 1px;
}
.delas {
  display: inline-block;
  font-size: 23px;
  padding-right: 31px;
}
/*time end*/

Any suggestion Please...

Since IDs must be unique, you should probably not use IDs if you need to replicate this multiple times on the same page — blex
– blex, Commented May 28, 2021 at 16:42
Please could you put your code into your answer, including an example of the HTML. Thanks. — A Haworth
– A Haworth, Commented May 28, 2021 at 18:28

jeffjenx · Accepted Answer · 2021-05-28 17:46:55Z

2

The document.getElementById(...) will only find the first element with that ID because HTML specifies that all IDs should be unique (appear only once in the source code).

You should change these commands to document.querySelectorAll(...), using class attributes instead of id attribute and then iterate through the results to apply the logic to multiple, similar elements.

answered May 28, 2021 at 17:46

jeffjenx

17.6k6 gold badges63 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

why multiple time 'timer' not working in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related