Estoy haciendo un temporizador de cuenta regresiva simple en javascript pero aparece este error:
"TypeError no detectado: no se puede establecer la propiedad 'innerText' de nulo en la cuenta regresiva".
No estoy seguro de cuál es el problema, ya que estoy siguiendo un tutorial de YouTube y tengo exactamente el mismo código. Este es mi código 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);Aquí está mi 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>Agradecido por cualquier tipo de ayuda
Está utilizando nombres de clase incorrectos para identificar los elementos (duplicó la clase de day 3 veces). También te falta una etiqueta de section de cierre:
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>