[Dúvida] O botão de novo jogo não funciona | Lógica de programação: explore funções e listas

Meu botão de novo jogo não está funcionando e não sei oque eu possa ter feito de errado Java:

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

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

function exibirMensagemInical() { exibirTextoNaTela('h1', 'Jogo Do Número Secreto'); exibirTextoNaTela('p', 'chute um número de 1 a 10'); }

exibirMensagemInical();

function verificarChute() { let chute = document.querySelector('input').value;

if (chute == numeroSecreto) { exibirTextoNaTela('h1', 'Acertou!'); let palavraTentativa = tentativas > 1 ? 'tentativas' : 'tentiva'; let mensagemTentavtivas = Você descobriu o número secreto com ${tentativas} ${palavraTentativa}!; exibirTextoNaTela('p', mensagemTentavtivas); document.getElementById('reiniciar').removeAttribute('disabled'); }else{ if (chute > numeroSecreto) { exibirTextoNaTela('p', 'O número secreto é menor'); } else { exibirTextoNaTela('p', 'O número secreto é maior'); } tentativas++; limpaCampo(); } }

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

function limpaCampo() { chute = document.querySelector('input'); chute.value = ''; } function reiniciarJogo() { numeroSecreto = gerarNumeroAleatorio(); limpaCampo(); tentativas = 1; exibirMensagemInical(); document.getElementById('reiniciar').setAttribute('disabled', true) }

e o HTML:

!DOCTYPE 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="reiniciarJogo()" 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>

Oi Enzo,

O problema está na forma como você está manipulando o elemento de input dentro da função limpaCampo().

Você está sobrescrevendo a variável chute com o elemento HTML, em vez de acessar o valor do input. 🤔

Para corrigir, você precisa acessar o elemento input usando document.querySelector('input') e então alterar o valor dele. Veja a correção:

function limpaCampo() {
    let chute = document.querySelector('input');
    chute.value = '';
}

Com essa alteração, o campo de input será limpo corretamente e o botão de novo jogo funcionará como esperado. 👍

Para saber mais: Documentação do querySelector no MDN - Explore a documentação oficial do querySelector para entender melhor como selecionar elementos no DOM.

Continue praticando e explorando o mundo da programação! 💪

Mergulhe em programação