Na jornada de estudos ao colocar a solução descrita pela Gui Lima:
document.body.addEventListener("click", e => { if(e.target.id == 'jogar-novamente') { window.location.reload(); } })
apresentou-se o seguinte erro no console:
Verifiquei as soluções que foram descritas e uma pessoa teve um problema parecido no que se refere aos scripts referenciados no topo da page dentro da tag
, os meu estavam assim:`
<script src="./app/sortearNumero.js" defer></script>
<script src="./app/reconhecimentoDeVoz.js" defer></script>
<script src="./app/validacao.js"></script>
`
Ao analisar o código verifiquei a falta do Atributo "defer" no <script src="./app/validacao.js"></script>.
pesquisei o erro, o javascript estava carregando primeiro, antes do html ser carregado.
A propriedade defer faz com que a pagina seja carrega independente do script estar no inicio da página ou no final.
Declarações de script no topo da página dentro da tag <head> deve conter o atributo **defer** dentro da tag <script> caso contrário devem ser declaradas na ultima linha antes do fechamento da tag <body>.
definição de defer segundo(AI Gemini https://g.co/gemini/share/d2d789870f5d): Essa atributo garante que o script será carregado e executado apenas após o HTML da página ter sido completamente carregado. Isso é importante para evitar conflitos, especialmente se o script precisa manipular elementos da página que ainda não foram renderizados.
Para o funcionamento do evento o script deve estar desta forma:
`
<script src="./app/sortearNumero.js" defer></script>
<script src="./app/reconhecimentoDeVoz.js" defer></script>
<script src="./app/validacao.js" defer></script>
`
espero ter ajudado de alguma forma.
