Displaying content on html by class using JavaScript

Question

I want to add 2 clocks to a webpage. They both have the same class name and elements. Now, I want to countdown a time on both clocks from js.

But I am getting countdown on the left clock only. Time isn't updating/showing on the right clock. Now, how can I fix this? I know, this might be some dumb question. But I started javascript recently. So, forgive me if I am already doing something wrong in this code.

countdown = (gap) => {
  console.log(gap);
  const second = 1000;
  const minute = 60 * second;
  const hour = 60 * minute;
  const day = 24 * hour;

  setInterval(() => {
    gap -= 1000;

    if (gap <= 0) return;

    const textDay = Math.floor(gap / day);
    const textHour = Math.floor((gap % day) / hour);
    const textMinute = Math.floor((gap % hour) / minute);
    const textSecond = Math.floor((gap % minute) / second);

    
    
    document.querySelector(".day").innerText = textDay;
    document.querySelector(".hour").innerText = textHour;
    document.querySelector(".minute").innerText = textMinute;
    document.querySelector(".second").innerText = textSecond;
  }, 1000);
};

countdown(50000000);

h3
{
    display: inline;
}
div
{
    display: inline;    
}
body
{
    font-family: 'Courier New', Courier, monospace;
}
section
{
    display: inline;
    margin-inline: 5rem;   
}
#left
{    
    border: 2px solid green;
}
#right
{
    width: 2000vh;
    border: 2px solid green;
}

TechySharnav · Accepted Answer

It is because querySelector only returns the first occurrence of the element. To get all the elements, you need to use querySelectorAll, which returns an array, and iterate over it, to change the innerText of each element.

countdown = (gap) => {
  console.log(gap);
  const second = 1000;
  const minute = 60 * second;
  const hour = 60 * minute;
  const day = 24 * hour;

  setInterval(() => {
    gap -= 1000;

    if (gap <= 0) return;

    const textDay = Math.floor(gap / day);
    const textHour = Math.floor((gap % day) / hour);
    const textMinute = Math.floor((gap % hour) / minute);
    const textSecond = Math.floor((gap % minute) / second);

    
    
    document.querySelectorAll(".day").forEach(elem=>elem.innerText = textDay)
    document.querySelectorAll(".hour").forEach(elem=>elem.innerText = textHour)
    document.querySelectorAll(".minute").forEach(elem=>elem.innerText = textMinute)
    document.querySelectorAll(".second").forEach(elem=>elem.innerText = textSecond)
  }, 1000);
};

countdown(50000000);

h3
{
    display: inline;
}
div
{
    display: inline;    
}
body
{
    font-family: 'Courier New', Courier, monospace;
}
section
{
    display: inline;
    margin-inline: 5rem;   
}
#left
{    
    border: 2px solid green;
}
#right
{
    width: 2000vh;
    border: 2px solid green;
}

Displaying content on html by class using JavaScript

Answers (2)

Related Questions