[Dúvida] Função limparCampo(); | Lógica de programação: explore funções e listas

Olá, boa tarde! ( ou dia, ou noite! ) Identifiquei um problema comum no meu código quanto à função limparCampo(); Quando eu acerto o número, o campo também limpa, diferente do código feito pelo professor. Eu um outra dúvida no fórum eu vi a resolução desse problema, entretanto a minha dúvida é porque eu estou usando "else if" em vez de usar o "if" dentro do else.

let numeroSecreto = 4;
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 de 1 a 10");

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

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

  if (chute == numeroSecreto) {
    exibirTextoNaTela("h1", "Acertou!");
    let palavraTentativa = tentativas > 1 ? "tentativas" : "tentativa";
    let mensagemTetantivas = `Você descobriu o número secreto com ${tentativas} ${palavraTentativa}!`;
    exibirTextoNaTela("p", mensagemTetantivas);
    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++;
  limparCampo();
}

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

Quando o código está escrito assim, mesmo eu acertando o valor o campo apaga, então resolvi colocar dentro do "else if" e do "else", pra ser chamada apenas quando o número for maior ou menor que o número secreto:

let numeroSecreto = 4;
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 de 1 a 10");

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

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

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

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

Olá,

O valor é sempre apagado independentemente se for menor, igual ou maior pois está chamando a função responsável por limpar o campo no final da função verificarChute(). Veja o comentário no código abaixo:

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

  if (chute == numeroSecreto) {
    exibirTextoNaTela("h1", "Acertou!");
    let palavraTentativa = tentativas > 1 ? "tentativas" : "tentativa";
    let mensagemTetantivas = `Você descobriu o número secreto com ${tentativas} ${palavraTentativa}!`;
    exibirTextoNaTela("p", mensagemTetantivas);
    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++;
  limparCampo(); // Mesmo parando no if, else if ou no else, esta função sempre será chamada e por isso sempre irá apagar o valor no campo.
}

Referente a sua dúvida sobre o if e else if eu não consegui entender muito bem mas a ideia é de verificar se o número é igual, maior ou menor:

if (chute == numeroSecreto) {
    // valor igual
} else if (chute > numeroSecreto) {
    // valor maior
} else { 
    // valor menor
}

Caso não seja essa solução esperada, entre em contato novamente para que possamos lhe ajudar! (:

Mergulhe em programação