Roger-Melo / contagem-regressiva-ano-novo

🕐 Um boilerplate HTML + CSS para desenvolvermos uma contagem regressiva para o ano novo 🎉
https://youtu.be/ms0mXabu5RY
17 stars 17 forks source link

Erro no textContent #1

Open uujaum opened 2 years ago

uujaum commented 2 years ago

Boa noite professor, me chamo Jaum (João), segui um dos seus vídeos no Youtube e primeiramente gostaria de parabeniza-lo, eles são ótimos!

Em seguida: sou estudante de programação web front-end solitário, e ainda não iniciei meu curso de javascript, mas queria fazer site simples de contagem regressiva para o ENEM.

E desenvolvi ele tranquilo em HTML e CSS, mas travei no JS e fui procurar alguns vídeos, achei o seu, mas, infelizmente estou tendo erro no textContent.

Segue o erro:

Uncaught TypeError: Cannot set property 'textContent' of null at atualizaContagem

A função atualizaContagem foi o nome que dei a ela.

Segue o trecho do código HTML:

<section id="contador"> <div class="tempo"> <h3 id="dias"> 00 </h3> <p class="cont_p"> Dias </p> </div> <div class="tempo"> <h3 id="horas"> 00 </h3> <p class="cont_p"> Horas </p> </div> <div class="tempo"> <h3 id="minutos"> 00 </h3> <p class="cont_p"> Minutos </p> </div> <div class="tempo"> <h3 id="segundos"> 00 </h3> <p class="cont_p"> Segundos </p> </div> </section>

E segue também o trecho do meu código em JS:

const segundosContador = document.querySelector('#segundos') const minutosContador = document.querySelector('#minutos') const horasContador = document.querySelector('#horas') const diasContador = document.querySelector('#dias')

const proximoEnem = new Date().getFullYear() + 1 const proximoEnemAtual = new Date(November 21 ${proximoEnem} 13:30:00) //AQUI TEM ` MAS A MARKDOWN ATRAPALHOU

const atualizaContagem = () => { const horaAtual = new Date() const diferenca = proximoEnemAtual - horaAtual const dias = Math.floor(diferenca / 1000 / 60 / 60 / 24) const horas = Math.floor(diferenca / 1000 / 60 / 60) % 24 const minutos = Math.floor(diferenca / 1000 / 60) % 60 const segundos = Math.floor(diferenca / 1000) % 60

segundosContador.textContent = segundos < 10 ? '0' + segundos : segundos minutosContador.textContent = minutos < 10 ? '0' + minutos : minutos horasContador.textContent = horas < 10 ? '0' + horas : horas diasContador.textContent = dias < 10 ? '0' + dias : dias }

setInterval(atualizaContagem, 1000)

Se conseguir me auxiliar com esse erro eu agradeceria muito :)

GuiTroncon commented 2 years ago

Estava na mesma situação, perguntei para um amigo e ele me deu a dica de colocar o link do Js no HTML no final, antes de fechar o body e funcionou. Espero que funcione com você!