1
resposta

[Bug] Botão novoJogo não funciona

A funcão reiniciarJogo() não está chamando a função se clicar no botão do front-end, porém se eu colocar o comando dentro do console chamando a função ela roda certinho, segue imagem:

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

let numeroSecreto = gerarNumeroAleatorio();
let tentativas = 1;

function exibirTextoNaTela(tag, texto) {
let campo = document.querySelector(tag);
campo.innerHTML = texto;
}
function exibirMensagemInicial() {
exibirTextoNaTela('h1', 'Jogo do número secreto');
exibirTextoNaTela('p', 'Escolha um número entre 1 e 10');
}

exibirMensagemInicial();

function verificarChute() {
let chute = document.querySelector('input').value;

if (chute == numeroSecreto) {
    exibirTextoNaTela('h1', 'Parabéns! Você acertou!');
    let palavraTentativa = tentativas > 1 ? 'tentativas' : 'tentativa';
    let mensagemTentativas = `você é um gênio! Acertou em ${tentativas} ${palavraTentativa}!`;
    exibirTextoNaTela('p', mensagemTentativas);
    document.getElementById('reiniciar').removeAttribute('disabled');
} else {
    if (chute > numeroSecreto) {
        exibirTextoNaTela('p', 'O número secreto é menor');
    } else {
        exibirTextoNaTela('p', 'O número secreto é maior');
    }
    tentativas++;
    limparCampo();
}

}

function limparCampo() {
let chute = document.querySelector('input');
chute.value = '';
}

function reiniciarJogo() {
document.getElementById('reiniciar').setAttribute('disabled', true);
alert('Função chamada');
numeroSecreto = gerarNumeroAleatorio();
limparCampo();
tentativas = 1;
exibirMensagemInicial();

}`

`

<div class="container">
    <div class="container__conteudo">
        <div class="container__informacoes">
            <div class="container__texto">
                <h1>Adivinhe o <span class="container__texto-azul">numero secreto</span></h1>
                <p class="texto__paragrafo">Escolha um número entre 1 a 10</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="reiniciarJogo()" 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>
`
1 resposta

Olá, Felipe. Como vai?

O seu código está excelente e a lógica que você construiu está corretíssima! O que está acontecendo não é exatamente um erro ou um bug, mas sim o comportamento esperado do jogo devido a uma regra que você mesmo aplicou.

Se você observar o seu arquivo HTML, o botão "Novo jogo" foi criado com o atributo disabled:

  • <button onclick="reiniciarJogo()" id="reiniciar" class="container__botao" disabled>Novo jogo</button>

Esse atributo informa ao navegador que o botão deve começar desabilitado (inativo e não clicável) no front-end. Pela lógica perfeita que você montou na sua função verificarChute(), esse botão só perde o atributo disabled e se torna clicável no momento em que o jogador vence a partida (quando o chute for igual ao numeroSecreto).

Quando você digita o comando diretamente no console, ele funciona porque o console interage de forma direta com o JavaScript, ignorando os bloqueios visuais do HTML. Ou seja, para o botão funcionar clicando na tela, você precisa primeiro acertar o número secreto para que o seu código o libere!

Uma dica extra muito importante:
Notei que no código JavaScript que você colou aqui no fórum, existe a frase "Copiar código" perdida no finalzinho da função verificarChute(). Se esse texto tiver sido colado sem querer dentro do seu arquivo app.js no VS Code, ele vai gerar um erro de sintaxe e quebrar o seu jogo. Não se esqueça de apagá-lo, deixando apenas as chaves de fechamento da função!

Continue praticando, pois você está indo muito bem.

Espero que possa ter lhe ajudado!