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