3
respostas

[Dúvida] Melhorando o código

a minha dúvida é como eu poderia incluir a tecla 'Enter' no código por exemplo no botão chute só consigo acessa-lo por mouse mais eu quero a opção de tanto usar o mouse como o 'Enter'

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
3 respostas

Olá, Eudson! Tudo bem?

Para permitir que o botão "chute" seja acionado tanto pelo clique do mouse quanto pela tecla "Enter", você pode adicionar um evento de escuta para a tecla "Enter" no seu código. Vou te dar um exemplo prático de como isso pode ser feito em JavaScript, caso você esteja usando essa linguagem:

// Supondo que você já tenha uma função para lidar com o chute
function handleChute() {
    // Lógica para verificar o chute
    console.log("Chute realizado!");
}

// Adiciona um evento de clique ao botão
document.getElementById("botaoChute").addEventListener("click", handleChute);

// Adiciona um evento de tecla pressionada ao documento
document.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        handleChute();
    }
});

Neste exemplo, botaoChute é o ID do botão que você já tem no seu HTML. A função handleChute é chamada tanto quando o botão é clicado quanto quando a tecla "Enter" é pressionada. Assim, você oferece mais flexibilidade para o usuário interagir com o seu programa.

Espero ter ajudado e bons estudos!

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

muito obrigado mais em parte do código eu coloco? o código já está bem desenvolvido porque eu já terminei o curso de lógica

let listaNumeroSorteado = [];
let numeroLimite = 10;
let nuemeroSecreto = exibirNumeroAleatorio();
let tentativas = 1;

function exibirtextonatela(tag , texto) {
let campo = document.querySelector(tag);
campo.innerHTML = texto;
}
function exibitMensagemInicial() {
exibirtextonatela("h1", "jogo do número secreto");
exibirtextonatela("p", "Escolha um número entre 0 e 10");
}
exibitMensagemInicial();
function verificarChute() {
let chute = document.querySelector("input").value;

if (chute == nuemeroSecreto) {
    exibirtextonatela("h1", "você acertou!!!!");
    let palavraTentativa = tentativas > 1 ? "tentativas" : "tentativa";
    let mensagemTentativas = `você descobriu o numero secreto com ${tentativas} ${palavraTentativa}`;
    exibirtextonatela("p", mensagemTentativas);
    document.getElementById("reiniciar").removeAttribute("disabled");
} 
else if (chute > nuemeroSecreto) {
    exibirtextonatela("p", "o número secreto é menor");
} else {
    exibirtextonatela("p", "o número secreto é maior");
tentativas++}
limparCampo();

}

function exibirNumeroAleatorio() {
let numeroEscolhido = parseInt(Math.random()* numeroLimite + 1 );
let quantidadeDeElementoNaLista = listaNumeroSorteado.length;
if (quantidadeDeElementoNaLista == numeroLimite) {
listaNumeroSorteado = [];
}

if (listaNumeroSorteado.includes(numeroEscolhido)){
return exibirNumeroAleatorio();}
else {
listaNumeroSorteado.push(numeroEscolhido);
console.log(listaNumeroSorteado);
return numeroEscolhido;
}
}

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

function reiniciarJogo() {
nuemeroSecreto = exibirNumeroAleatorio();
limparCampo();
tentativas = 1;
exibitMensagemInicial();
document.getElementById("reiniciar").setAttribute("disabled", true);

Oi, Eudson!

Sobre sua última dúvida: para acionar o botão “chute” com a tecla Enter, adicione dois listeners logo após chamar exibitMensagemInicial();: um para o clique do botão e outro para o Enter no input. Faça exatamente assim (sem mudar sua lógica de jogo):


// após exibitMensagemInicial();
exibitMensagemInicial();

// pegue as referências do input e do botão de chutar
const inputChute = document.querySelector("input");
const botaoChutar = document.getElementById("chutar"); // certifique-se que seu botão tem id="chutar"

// 1) Clique do mouse no botão
botaoChutar.addEventListener("click", function () {
  verificarChute();
});

// 2) Tecla Enter dentro do input
inputChute.addEventListener("keydown", function (event) {
  if (event.key === "Enter") {
    event.preventDefault(); // evita submit/form recarregar a página
    verificarChute();
  }
});

Observações rápidas e importantes:

  • Garanta que o botão de chutar possui id="chutar" no HTML.
  • Mantenha seu verificarChute() como está. Os listeners apenas disparam essa função.
  • Se preferir via formulário, envolva o input e o botão em um <form id="form-chute"> e substitua os listeners acima por este único listener de submit:

// alternativa com formulário:
const formChute = document.getElementById("form-chute");
formChute.addEventListener("submit", function (event) {
  event.preventDefault();
  verificarChute();
});

Fico à disposição!