[Bug] Botão "Chute" não funciona

Meu problema é parecido com o seu: Quando reabro o Visual Studio Code o link entre o botão do HTML e a função function verificarChute() se perde. index.html:27 Uncaught ReferenceError: verificarChute is not defined![]

JS:

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', '0 número secreto é menor');
            } else {
                    exibirTextoNaTela('p', 'O número secreto é maior');
            }
            tentativas++;
    }

}

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

HTML

<div class="container">
    <div class="container__conteudo">
        <div class="container__informacoes">
            <div class="container__texto">
                <h1>Adivinhe o <span class="container__texto-azul">numero secreto</span></h1>
                <p class="texto__paragrafo">Escolha um número entre 1 a 10</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>

Por favor, alguém sabe como resolver isso?

Acabei descobrindo que falta um { na linha if

    if (chute == numeroSecreto) {
    

Cuidado ao copiar o código da transcrição do vídeo pois ele está errado, faltando o { na linha if

//Código omitido

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', '0 número secreto é menor');
            } else {
                    exibirTextoNaTela('p', 'O número secreto é maior');
            }
            tentativas++;
    }

}

Correto:

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', '0 número secreto é menor');
            } else {
                    exibirTextoNaTela('p', 'O número secreto é maior');
            }
            tentativas++;
    }

}

Oi Vanessa, tudo bem?

Verifique se o arquivo app.js está na mesma pasta que o index.html.

Caso não esteja você precisa referenciar o caminho correto do arquivo em:

<script src="app.js" defer></script>

Você pode ir no explorador até o diretório onde se encontra o arquivo app.js, clicar com o botão direito em cima deste arquivo e em seguida escolher a opção copy relative path, então cole o caminho correto na linha de código que mencionei acima.

Deve ficar parecido com isso:

<script src="algumDiretório/app.js" defer></script>

Ou se perceber que algum arquivo está em local incorreto você pode mover este arquivo para que os 2 fiquem no mesmo diretório, assim você consegue acessa-lo sem especificar um caminho, que por padrão buscará na mesma pasta em que arquivo que está referenciando se encontra. Portanto poderá deixar a linha <script src="app.js" defer></script> como está.

Espero ter ajudado e caso a proposta de solução foi útil para você, não esqueça de marcar o tópico como solucionado e se precisar de algo mais estou a disposição!

Oi gente! Agradeço pelas sugestões. Eu reescrevi o código prestando atenção nos pontos e vírgulas, chaves, parênteses, aspas e tudo mais, mesmo assim, meu botão continua sem funcionar! Eu também verifiquei o diretório e o caminho estava certo, mesmo assim, não funcionou.

Continuo com o mesmo bug!

Edit: Pessoal, consegui resolver com a dica do Daniel depois de reescrever o código pela segunda vez! Coloquei o "let chute (...)" ao lado da chave { e passei esse let para a linha 11 dentro do function. Agora o meu botão está funcionando!

Muito obrigada!