1
resposta

[Bug] as mensagens sumiram do nada

let numeroSecreto = gerarNumeroAleatorio(); let tentativas = 1; function exibirTextoNaTela(tag, Texto) { let campo = document.querySelector(tag); campo.innerHTML = Texto; }

function exibirMensagemInicial() { exibirTextoNaTela('h1','Jogo do numero secreto'); exibirTextoNaTela('p','escolha um numero 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 numero com ${tentativas} ${palavraTentativa}`;
    exibirTextoNaTela  ('p', mensagemTentativas);
     document.getElementById('reiniciar').removeAttribute('disabled');
}else{
    if (chute < numeroSecreto) {
        exibirTextoNaTela('p','O numero secreto é maior');
    }else{
        exibirTextoNaTela('p','O numero secreto é menor');
    }
    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); }

Os códigos acimas são os de java script e os códigos abaixo são do index.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="reiniciar" 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

E aí Pedro beleza?

Basicamente identifiquei dois problemas, o primeiro é que você não está iniciando o método e o segundo é o método reiniciar no botão estava com o nome errado.

Fiz em um arquivo só, e precisei tirar o link do .js e o div da imagem pq eu não tinha a imagem dá uma olhada aí :

<!DOCTYPE html>
<html>
    <body class="container">
    <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>
        </div>
    </div>
    </body>

    <script>
        let numeroSecreto = gerarNumeroAleatorio();
        let tentativas = 1; 
        
        function exibirTextoNaTela(tag, Texto) {
            let campo = document.querySelector(tag); 
            campo.innerHTML = Texto; 
        }

        function exibirMensagemInicial() {
            exibirTextoNaTela("h1",'Jogo do numero secreto'); 
            exibirTextoNaTela("p",'escolha um numero 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 numero com ${tentativas} ${palavraTentativa}`;
                exibirTextoNaTela  ('p', mensagemTentativas);
                document.getElementById('reiniciar').removeAttribute('disabled');
            } else {
            
                if (chute < numeroSecreto) {
                    exibirTextoNaTela('p','O numero secreto é maior');
                } else {
                    exibirTextoNaTela('p','O numero secreto é menor');
                }
                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); 
        }

        exibirMensagemInicial(); // Exibe as mensagens quando carregar a tela
    </script>
</html>