Uncaught TypeError: Cannot set property 'innerText' of null at countdown, JAVASCRIPT

I'm making a simple countdown timer in javascript but I get this error:

"Uncaught TypeError: Cannot set property 'innerText' of null at countdown."

I'm not sure what the problem is, since i'm following a youtube tutorial and have the exact same code. This is my js code:

const countdown = () => {
  const countDate = new Date("Oct 1, 2021, 15:31:11").getTime();
  const now = new Date().getTime();
  const gap = countDate - now;

  const second = 1000;
  const minute = second * 60;
  const hour = minute * 60;
  const day = hour * 24;

  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;

  console.log(gap);
};

setInterval(countdown, 1000);

Here is my HTML:

<!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">
  <title>
    Countdown Timer
  </title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>


  <body>
    <section class="coming-soon">
      <div>
        <h2>OPENING SOON!</h2>
        <div class="countdown">
          <div class="container-day">
            <h3 class="day">Time</h3>
            <h3>Day</h3>
          </div>
          <div class="container-hour">
            <h3 class="day">Time</h3>
            <h3>Hour</h3>
          </div>
          <div class="container-minute">
            <h3 class="day">Time</h3>
            <h3>Minute</h3>
          </div>
          <div class="container-second">
            <h3 class="day">Time</h3>
            <h3>Second</h3>
          </div>

        </div>
      </div>

  </body>
</head>

</html>

Thankful for any kind of help

Solution

You are using incorrect class names to identify the elements (you duplicated the day class 3 times). You're also missing a closing section tag:

const countdown = () => {
  const countDate = new Date("Oct 1, 2021, 15:31:11").getTime();
  const now = new Date().getTime();
  const gap = countDate - now;

  const second = 1000;
  const minute = second * 60;
  const hour = minute * 60;
  const day = hour * 24;

  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;

  console.log(gap);
};

setInterval(countdown, 1000);

<!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">
  <title>
    Countdown Timer
  </title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>

  <body>
    <section class="coming-soon">
      <div>
        <h2>OPENING SOON!</h2>
        <div class="countdown">
          <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>

        </div>
      </div>
    </section>

  </body>


</html>