Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Botao on click não funciona

por Thiago Reis de Oliveira
| 2.1k xp | 1 posts

Boa tarde, estou fazendo o jogo do numero secreto com js e html, mas estou tendo muita dificuldade com os botões, pois mesmo clicando e atribuindo funçoes tanto no js e no html, nao acontece nada quando o botão "novo jogo" é clicado, queria saber como faço para conseguir fazer o botão "novo jogo" funcionar, o botao "chute" esta funcionando bem. aqui esta o codigo:

let numeroSecret = GerarNumero();
let tentativas = 1;

function exibirTexto(tag, texto){
 let campo = document.querySelector(tag);
 campo.innerHTML = texto;
}
 exibirTexto("h1", "jogo do numero secreto");
 exibirTexto(`p`, "escolha um numero entre 1 e 10");

function verificarChute() {
  let chute = document.querySelector('input').value;
  console.log(numeroSecret);
  console.log(chute == numeroSecret)
  if (chute == numeroSecret){
   let mensagemtentativa = tentativas > 1 ? 'tentativas' : 'tentativa';
    let palavraTentativa = `voce descobriu o numero secreto com ${tentativas} ${mensagemtentativa}`;
    exibirTexto('h1', 'parabens, voce acertou!');
    exibirTexto('p', `${palavraTentativa} `);
    document.getElementById('reiniciar').removeAttribute('disabled');
} else {
  if (chute < numeroSecret){
    exibirTexto('p', `o numero secreto é maior que ${chute}`);
  } else if (chute > numeroSecret){
    exibirTexto('p', `o numero secreto é menor que ${chute}`);
    }

  tentativas++;
  LimparCampo();
    
  }
}
 
function GerarNumero(){
 return parseInt(Math.random() * 10 + 1);
}
function LimparCampo(){
  chute = document.querySelector('input');
  chute.value = '';
}
function reiniciarGame(){
  console.log(' o botao foi clicado');
  numeroSecret = GerarNumero();
  LimparCampo();
  tentativas = 1;
  exibirTexto("h1", "jogo do numero secreto");
  exibirTexto(`p`, "escolha um numero entre 1 e 10");
}

E aqui o HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.responsivevoice.org/responsivevoice.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Inter:wght@400;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>JS Game</title>
</head>

<body>

    <div class="container">
        <div class="container__conteudo">
            <div class="container__informacoes">
                <div class="container__texto">
                    <h1></h1>
                    <p class="texto__paragrafo"></p>
                </div>
                <input type="number" min="1" max="10" class="container__input">
                <div class="chute container__botoes">
                    <button onclick="verificarChute()" class="container__botao">Chutar</button>
                    <button onclick='reiniciarGame()' id="reiniciar" class="container__botao" disabled>Novo jogo</button>
                </div>
            </div>
            <img src="./img/ia.png" alt="Uma pessoa olhando para a esquerda" class="container__imagem-pessoa" />
        </div>
    </div>




    <script src="app.js" defer></script>
</body>

</html>
1 resposta
por Armano Barros Alves Junior
| 4073.7k xp | 8632 posts
Alura Scuba Team

Oi, Thiago! Como vai?

Você está enfrentando um problema com o botão "Novo jogo" não funcionando, mesmo o clique sendo reconhecido no console.

Do jeito que você explicou, o problema pode estar ligado à ordem de carregamento do seu JavaScript. Mesmo usando defer na tag <script>, seu código está executando logo ao carregar a página, e pode não encontrar ainda o botão com id="reiniciar", por isso o onclick não ativa.

Para garantir que os elementos do DOM estejam prontos antes de rodar qualquer função, você pode envolver seu código JavaScript dentro de um window.onload.

Ajuste seu código assim:


window.onload = function () {
  let numeroSecret = GerarNumero();
  let tentativas = 1;

  function exibirTexto(tag, texto) {
    let campo = document.querySelector(tag);
    campo.innerHTML = texto;
  }

  exibirTexto("h1", "jogo do numero secreto");
  exibirTexto("p", "escolha um numero entre 1 e 10");

  document.querySelector("button").onclick = verificarChute;
  document.getElementById("reiniciar").onclick = reiniciarGame;

  function verificarChute() {
    let chute = document.querySelector("input").value;
    if (chute == numeroSecret) {
      let mensagemtentativa = tentativas > 1 ? "tentativas" : "tentativa";
      exibirTexto("h1", "parabens, voce acertou!");
      exibirTexto("p", "voce descobriu o numero secreto com " + tentativas + " " + mensagemtentativa);
      document.getElementById("reiniciar").removeAttribute("disabled");
    } else {
      if (chute < numeroSecret) {
        exibirTexto("p", "o numero secreto e maior que " + chute);
      } else {
        exibirTexto("p", "o numero secreto e menor que " + chute);
      }
      tentativas++;
      LimparCampo();
    }
  }

  function GerarNumero() {
    return parseInt(Math.random() * 10 + 1);
  }

  function LimparCampo() {
    document.querySelector("input").value = "";
  }

  function reiniciarGame() {
    numeroSecret = GerarNumero();
    LimparCampo();
    tentativas = 1;
    exibirTexto("h1", "jogo do numero secreto");
    exibirTexto("p", "escolha um numero entre 1 e 10");
    document.getElementById("reiniciar").setAttribute("disabled", true);
  }
};

Explicando rapidamente:

  • O código agora só roda após a página carregar, evitando problemas de elementos ainda não encontrados no DOM.
  • O botão de reinício volta a funcionar porque a função reiniciarGame() agora está corretamente atribuída depois do carregamento.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.