Entrar Ainda não tem acesso?
1
resposta

[Dúvida] como acionar um button com clique do mouse e enter

por Taina Santos de Lima
| 37.7k xp | 1 posts

No projeto jogo do número secreto quando o usuário digita o número ele é obrigado a clicar com o mouse no botão "Chutar", mas para tornar esse processo mais dinâmico gostaria que o usuaria pudesse fazer o mesmo pressionando o botão enter. Tentei de várias formas fazer isso, porém sem resultados. Agradeço a ajuda desde já.

<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>
let listaDeNumerosSorteados = [];
let numeroLimite = 10;
let numeroSecreto = gerarNumeroAleatorio();
let tentativas = 1;

function exibirTextoNaTela(tag, texto) {
    let campo = document.querySelector(tag);
    campo.innerHTML = texto;
    responsiveVoice.speak(texto, 'Brazilian Portuguese Female', {rate:1.2});
}

function exibirMensagemInicial() {
    exibirTextoNaTela('h1', 'Jogo do número secreto');
    exibirTextoNaTela('p', 'Escolha um número entre 1 e 10');
}

exibirMensagemInicial();

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);
        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 gerarNumeroAleatorio() {
    let numeroEscolhido = parseInt(Math.random() * numeroLimite + 1);
    let quantidadeDeElementosNaLista = listaDeNumerosSorteados.length;

    if (quantidadeDeElementosNaLista == numeroLimite) {
        listaDeNumerosSorteados = [];
    }
    if (listaDeNumerosSorteados.includes(numeroEscolhido)) {
        return gerarNumeroAleatorio(); 
    } else {
        listaDeNumerosSorteados.push(numeroEscolhido);
        console.log(listaDeNumerosSorteados);
        return numeroEscolhido;
    }
}

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

function reiniciarJogo() {
    numeroSecreto = gerarNumeroAleatorio();
    limparCampo();
    tentativas = 1;
    exibirMensagemInicial();
    document.getElementById('reiniciar').setAttribute('disabled', true);
}
</script>
1 resposta
por Lorena Garcia
| 12523.3k xp | 18711 posts
Alura Scuba Team

Oi Taina, tudo bem?

Pra permitir que o usuário pressione a tecla "Enter" para acionar a função verificarChute(), você precisa adicionar um listener de evento para o evento keydown no elemento de input. Quando o usuário pressionar a tecla "Enter", você pode chamar a função verificarChute().

Uma solução para isso seria assim:

  1. Adicione um id ao elemento input para que possamos selecioná-lo facilmente.
  2. No script, adicione um event listener ao input que ouça o evento keydown. Se a tecla pressionada for "Enter" (código 13), chame a função verificarChute().

Mantenha o elemento input como está, mas adicione um id para facilitar a seleção:

<input type="number" min="1" max="10" id="numeroInput" class="container__input">

Agora, adicionando o listener de evento no script:

//  Seu código existente 

document.addEventListener('DOMContentLoaded', function() {
    // Seleciona o input pelo ID e adiciona o event listener para o evento keydown
    document.getElementById('numeroInput').addEventListener('keydown', function(event) {
        // Verifica se a tecla pressionada foi "Enter" (código 13)
        if (event.keyCode === 13) {
            verificarChute(); // Chama a função verificarChute se a tecla "Enter" foi pressionada
        }
    });
});

// ... Seu código existente

Neste exemplo, envolvemos a adição do event listener no evento DOMContentLoaded para garantir que o script só adicione o event listener após o conteúdo da página ter sido completamente carregado. Em seguida, adicionamos um listener de evento keydown ao elemento input e verificamos se a tecla pressionada foi a tecla "Enter" (código 13). Se for, chamamos a função verificarChute().

Aqui você pode conferir o código completo que usei para testar caso fique com dúvidas.

Um abraço e bons estudos.