1
resposta

Meu exibirNumeroNaTela não está atualizando!

let numeroSecreto = gerarNumeroAleatorio();

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;
    console.log(chute == numeroSecreto);
}

if (chute == numeroSecreto){
    exibirTextoNaTela('h1', 'Acertou!');
    exibirTextoNaTela('p', 'Você decobriu o número secreto.');
} else {
    if (chute > numeroSecreto){
        exibirTextoNaTela('p', 'O númeoro secreto é menor');
    } else {
        exibirTextoNaTela('p', 'O número secreto é maior');
    }
}

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

A primeira parte de exibirNumeroNaTela aparece normalmente no frontend porém o segundo chamado não atualiza para "Acertei!".

Alguém sabe me dizer o que posso ter errado é como corrigir?

1 resposta

Olá, João.

Tudo bem?

Pelo que você descreveu e pelo código que você compartilhou, parece que o problema está na estrutura do seu código. O bloco de verificação do chute está fora da função verificarChute, o que significa que ele não será executado quando a função for chamada. Você precisa mover esse bloco de verificação para dentro da função verificarChute. Além disso, é importante garantir que a função verificarChute seja chamada quando o usuário fizer um chute.

Aqui está uma versão corrigida do seu código:

let numeroSecreto = gerarNumeroAleatorio();

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;
    console.log(chute == numeroSecreto);

    if (chute == numeroSecreto) {
        exibirTextoNaTela('h1', 'Acertou!');
        exibirTextoNaTela('p', 'Você descobriu o número secreto.');
    } else {
        if (chute > numeroSecreto) {
            exibirTextoNaTela('p', 'O número secreto é menor');
        } else {
            exibirTextoNaTela('p', 'O número secreto é maior');
        }
    }
}

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

Além disso, certifique-se de que a função verificarChute seja chamada quando o usuário fizer um chute. Por exemplo, você pode adicionar um botão no HTML que chama essa função:

<input type="number" id="chute">
<button onclick="verificarChute()">Chutar</button>

Com essas alterações, seu código deve funcionar conforme o esperado, atualizando a mensagem na tela quando o usuário acertar ou errar o número secreto.

Veja se faz sentido, faça o teste. Qualquer dúvida manda aqui de novo.

Espero ter ajudado e bons estudos!