1
resposta

[Dúvida] Erro clicar no botão

Já resolvi, problema era com meu navegador.

Boa tarde! Quero uma ajuda com meu código, quando clico no botão "chutar" não consigo realizar outra tentativa, só se atualizar a página, quando atualiza a pagina o "numeroSecreto" é alterado, já estou uns 3 dias tentando resolver, me rendi a ajuda, segue o código.

Desde de já, agradeço pelo a ajuda!

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

=============================++++++++=============================================


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

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

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 do jogo 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++;
    }
}

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

Oi Daniel,

Pelo código que você compartilhou, notei que após verificar o chute, o campo de input não está sendo limpo.

Para resolver isso, você pode adicionar uma linha de código na sua função verificarChute() para limpar o campo de input após cada tentativa. 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 do jogo secreto com ${tentativas} ${palavraTentativa}!`;
        exibirTextoNaTela('p', mensagemTentativas);
        document.getElementById('reiniciar').removeAttribute('disabled'); // Habilita o botão "Novo jogo"
    } else {
        if (chute > numeroSecreto) {
            exibirTextoNaTela('p','O número secreto é menor!');
        }else {
            exibirTextoNaTela('p','O número secreto é maior!');
        }
        tentativas++;
    }
    document.querySelector('input').value = ''; // Limpa o campo de input
}

Além disso, para permitir que o jogo seja reiniciado sem atualizar a página, você pode criar uma função para o botão "Novo jogo" e chamá-la no onclick do botão no HTML, 🤔 e habilitar o botão "Novo jogo" quando o jogador acerta:

No HTML:

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

No Javascript:

function reiniciarJogo() {
    numeroSecreto = gerarNumeroAleatorio();
    tentativas = 1;
    limparCampo(); // Limpa o campo de input
    exibirMensagemInicial(); // Restaura as mensagens iniciais
    document.getElementById('reiniciar').setAttribute('disabled', true); // Desabilita o botão "Novo jogo" novamente
}

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

function exibirMensagemInicial() {
    exibirTextoNaTela('h1','jogo do número secreto');
    exibirTextoNaTela('p', 'Escolha um número entre 1 e 10');
}

E chame a função exibirMensagemInicial() no início do seu script para configurar as mensagens quando a página carrega.

🤓 Para saber mais: Documentação Input HTML.

Com essas alterações, seu jogo deve funcionar corretamente, permitindo múltiplas tentativas e reiniciando o jogo ao clicar no botão "Novo jogo"! 🧐

Continue praticando e explorando a lógica de programação!

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