Entrar Ainda não tem acesso?
1
resposta

[Bug] [Bug] Botão Reiniciar

Referente ao curso Lógica de programação: explore funções e listas, no capítulo Reiniciando o jogo e atividade Reiniciando o Jogo

por Nicole Do Nascimento Santana
| 13.2k xp | 1 posts

Meu botão para reiniciar o jogo não está funcionando. Já testei duas sugestões que foram dadas a outros alunos, mas o meu ainda não deu certo.

CÓDIGO HTML:

<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="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>

CÓDIGO JS

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 1 número entre 1 e 10'); }

exibirMensagemInicial();

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

if (chute == numeroSecreto){
    exibirTextoNaTela('h1', 'Acertou :)');
    let palavraTentativa = tentativas > 1 ? 'tentativas' : 'tentativa';
    let mensagemTentativas = `Você descobriu o número secreto com ${tentativas} ${palavraTentativa}!`;
    exibirTextoNaTela('p', mensagemTentativas);
}else{
    if(chute > numeroSecreto){
        exibirTextoNaTela('p', 'O número secreto é menor!');
    }else{
        exibirTextoNaTela('p', 'O número secreto é maior!');
    }
    tentativas++;
    limparCampo();
}

}

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

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

function reiniciarJogo() { numeroSecreto = gerarNumeroAleatorio(); limparCampo(); tentativas = 1; exibirMensagemInicial(); document.getElementById("reiniciar").setAttribute("disabled", true); document.querySelector('button').removeAttribute('disabled'); }

1 resposta
por Luis Dias
| 3345.2k xp | 3676 posts

Oi Nicole, tudo bem? 😊

Analisando seu código, percebi que o botão "Novo jogo" não está habilitando após o chute correto. 🤔

O problema está na função verificarChute(). Após acertar o número, você não está habilitando o botão "Novo jogo" e desabilitando o botão "Chutar".

Para corrigir, você precisa adicionar as seguintes linhas dentro do bloco if (chute == numeroSecreto) na função verificarChute():

document.getElementById("reiniciar").removeAttribute("disabled");
document.querySelector('button').setAttribute('disabled', true);

Com essas alterações, o botão "Novo jogo" será habilitado e o botão "Chutar" será desabilitado quando o jogador acertar o número secreto. 👍

Seu código corrigido ficaria assim:

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 1 número entre 1 e 10');
}

exibirMensagemInicial();

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

    if (chute == numeroSecreto){
        exibirTextoNaTela('h1', 'Acertou :)');
        let palavraTentativa = tentativas > 1 ? 'tentativas' : 'tentativa';
        let mensagemTentativas = `Você descobriu o número secreto com ${tentativas} ${palavraTentativa}!`;
        exibirTextoNaTela('p', mensagemTentativas);
        document.getElementById("reiniciar").removeAttribute("disabled");
        document.querySelector('button').setAttribute('disabled', true);
    }else{
        if(chute > numeroSecreto){
            exibirTextoNaTela('p', 'O número secreto é menor!');
        }else{
            exibirTextoNaTela('p', 'O número secreto é maior!');
        }
        tentativas++;
        limparCampo();
    }
}

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

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

function reiniciarJogo() {
    numeroSecreto = gerarNumeroAleatorio();
    limparCampo();
    tentativas = 1;
    exibirMensagemInicial();
    document.getElementById("reiniciar").setAttribute("disabled", true);
    document.querySelector('button').removeAttribute('disabled');
}

🎓 Para saber mais:

Espero que isso ajude a resolver seu problema! Continue praticando e explorando o mundo da programação! 💪

tux matrixCaso este post o tenha ajudado,marque-o como solucionado ☑️.Bons Estudos! 🤓