Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Meu Título e Parágrafo sumiram

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

por ANDERSON ISIDORO DA SILVA
| 25k xp | 7 posts
Técnico de Segurança do Trabalho

Acompanhando a aula, percebi que meu h1 e p sumiram, e também não está funcionando o campo input.

<!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 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
por Armano Barros Alves Junior
| 3612.4k xp | 7664 posts
Alura Scuba Team Monitor | Suporte Educacional

Olá Anderson! Tudo bem?

O problema pode estar relacionado ao fato de que as tags <h1> e <p> estão sendo preenchidas dinamicamente pelo JavaScript. No seu código, você está usando a função exibirTextoNaTela para inserir texto nessas tags. Certifique-se de que essa função está sendo chamada corretamente e que o JavaScript está sendo executado sem erros.

Aqui estão algumas coisas para verificar:

  1. Verifique o console do navegador: Abra as ferramentas de desenvolvedor do seu navegador (geralmente pressionando F12) e veja se há algum erro no console. Erros de JavaScript podem impedir que o código seja executado corretamente.

  2. Confirme o carregamento do JavaScript: Certifique-se de que o arquivo app.js está sendo carregado corretamente. Você pode verificar isso olhando na aba "Network" das ferramentas de desenvolvedor para ver se há algum erro de carregamento.

  3. Conteúdo das funções: Verifique se a função exibirTextoNaTela está realmente sendo chamada. No seu código, você está chamando essa função para definir o texto do <h1> e do <p> logo após a definição das funções. Certifique-se de que essas linhas estão sendo executadas.

  4. Estrutura HTML: Embora o HTML pareça correto, certifique-se de que não há CSS ou outros scripts que possam estar ocultando ou removendo o conteúdo dessas tags.

Aqui está um exemplo de como a função exibirTextoNaTela deve funcionar corretamente:

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

Se o problema persistir, tente isolar o problema removendo partes do código para ver se algo específico está causando o problema, ou adicione console.log dentro da função para verificar se ela está sendo chamada corretamente.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.