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

Question

我正在 javascript 中制作一个简单的倒数计时器，但我收到此错误：

“未捕获类型错误：无法在倒计时时设置属性 'innerText' 为 null。”

我不确定问题出在哪里，因为我正在关注 youtube 教程并且拥有完全相同的代码。这是我的js代码：

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

这是我的 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>

感谢任何形式的帮助

Answer 1

您使用了不正确的 class 名称来标识元素（您将 day class 重复了 3 次）。您还缺少结束 section 标记：

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>

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

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

javascript

countdowntimer