1
resposta

[Sugestão] Botão de reiniciar não funciona

Estou seguindo os passos, mas o botão segue desabilitado mesmo após acertar o número secreto

segue app.js

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



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



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 ${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 = gerarNumeroSecreto();
    exibirMensagemInicial();
    limparCampo();
    numeroTentativas = 1;
    document.getElementById('reiniciar').setAttribute('disabled', true);
}

No console aparece a seguinte mensagem

"Um elemento de campo de formulário não possui um atributo id nem name. Isso pode impedir que o navegador preencha automaticamente o formulário corretamente. Para corrigir esse problema, adicione um atributo de id ou nome exclusivo a um campo de formulário. Isso não é estritamente necessário, mas ainda é recomendado mesmo se você tiver um atributo de preenchimento automático no mesmo elemento. "

Continuo sem entender onde está o erro. Conseguem me ajudar?

1 resposta

Imagen referente a linha 28 do html, botão Novo JogoBoa tarde Maria Eduarda,

No código HTML do projeto, na linha 28, temos o código para o botão de Novo Jogo, e vemos que ele tem um parâmetro "disabled" que faz como que esse botão fique desabilitado no carregamento da pagina. No curso ao fazemos a "remoção" dinamicamente através do Java script, e percebi que no seu código você não acrescentou o comando que realiza a ação de desativação desse parâmetro.

No seu código dentro da função verificaChute() no primeiro if, logo após a declaração da variável "mensagemTentativas", você precisa pegar o elemento no HTML pelo ID dele e usar um método para remover esse atributo.

ficaria assim: document.getElementById('reiniciar').removeAttribute('disabled');

esse codigo vai pegar o elemento do botão Novo Jogo pelo ID dele que é 'reiniciar', e vai remover dinamicamente o atributo 'disabled', tornando o seu botão ativo

No seu codigo ficaria assim:

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 ${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();
    } 
}