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;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/style.css" />
    <title>Document</title>
  </head>
  <body>
    <section id="left">
      <div class="container-day">
        <h3 class="day">Time</h3>
        <h3>Day</h3>
      </div>
      <div class="container-hour">
        <h3 class="hour">Time</h3>
        <h3>Hour</h3>
      </div>
      <div class="container-minute">
        <h3 class="minute">Time</h3>
        <h3>Minute</h3>
      </div>
      <div class="container-second">
        <h3 class="second">Time</h3>
        <h3>Second</h3>
      </div>
    </section>
    <section id="right">
        <div class="container-day">
          <h3 class="day">Time</h3>
          <h3>Day</h3>
        </div>
        <div class="container-hour">
          <h3 class="hour">Time</h3>
          <h3>Hour</h3>
        </div>
        <div class="container-minute">
          <h3 class="minute">Time</h3>
          <h3>Minute</h3>
        </div>
        <div class="container-second">
          <h3 class="second">Time</h3>
          <h3>Second</h3>
        </div>
      </section>

      <script src="/js.js"></script>
  </body>
</html>

Search for querySelector vs querySelectorAll.

user7290573
– user7290573

2021-06-11 13:14:27 +00:00
Commented Jun 11, 2021 at 13:14 — user7290573
– user7290573, Commented Jun 11, 2021 at 13:14

TechySharnav · Accepted Answer · 2021-06-11 13:16:31Z

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;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/style.css" />
    <title>Document</title>
  </head>
  <body>
    <section id="left">
      <div class="container-day">
        <h3 class="day">Time</h3>
        <h3>Day</h3>
      </div>
      <div class="container-hour">
        <h3 class="hour">Time</h3>
        <h3>Hour</h3>
      </div>
      <div class="container-minute">
        <h3 class="minute">Time</h3>
        <h3>Minute</h3>
      </div>
      <div class="container-second">
        <h3 class="second">Time</h3>
        <h3>Second</h3>
      </div>
    </section>
    <section id="right">
        <div class="container-day">
          <h3 class="day">Time</h3>
          <h3>Day</h3>
        </div>
        <div class="container-hour">
          <h3 class="hour">Time</h3>
          <h3>Hour</h3>
        </div>
        <div class="container-minute">
          <h3 class="minute">Time</h3>
          <h3>Minute</h3>
        </div>
        <div class="container-second">
          <h3 class="second">Time</h3>
          <h3>Second</h3>
        </div>
      </section>

      <script src="/js.js"></script>
  </body>
</html>

R3FL3CT · Accepted Answer · 2021-06-11 13:16:46Z

You're doing document.querySelector, which only gets the first result. You have to use a more specified querySelector, by specifying the parent element.

countdown = (gap,clock) => {
  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(clock+" .day").innerText = textDay;
    document.querySelector(clock+" .hour").innerText = textHour;
    document.querySelector(clock+" .minute").innerText = textMinute;
    document.querySelector(clock+" .second").innerText = textSecond;
  }, 1000);
};

countdown(50000000,"#left");
countdown(20000,"#right")

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;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/style.css" />
    <title>Document</title>
  </head>
  <body>
    <section id="left">
      <div class="container-day">
        <h3 class="day">Time</h3>
        <h3>Day</h3>
      </div>
      <div class="container-hour">
        <h3 class="hour">Time</h3>
        <h3>Hour</h3>
      </div>
      <div class="container-minute">
        <h3 class="minute">Time</h3>
        <h3>Minute</h3>
      </div>
      <div class="container-second">
        <h3 class="second">Time</h3>
        <h3>Second</h3>
      </div>
    </section>
    <section id="right">
        <div class="container-day">
          <h3 class="day">Time</h3>
          <h3>Day</h3>
        </div>
        <div class="container-hour">
          <h3 class="hour">Time</h3>
          <h3>Hour</h3>
        </div>
        <div class="container-minute">
          <h3 class="minute">Time</h3>
          <h3>Minute</h3>
        </div>
        <div class="container-second">
          <h3 class="second">Time</h3>
          <h3>Second</h3>
        </div>
      </section>

      <script src="/js.js"></script>
  </body>
</html>

Collectives™ on Stack Overflow

Displaying content on html by class using JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related