Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Enter como click

Em um vídeo passado, vi no fórum uma dúvida de como inserir o comando de enter ao invés de clicar no botão criado. Peguei a resposta do fórum e coloquei no meu código para testar. Tenho duas dúvidas, gostaria de saber como ela está funcionando(parte entre os comentários no código)? E também notei que as vezes clicando enter, o alert de certo ou errado aparece rapidamente e some, ou sequer aparece, por que isso ocorre?

<meta charset = "UTF-8">
<input>

<button>Compare com o segredo</button>
<script>
    var entrada = document.querySelector("input");
    entrada.focus();
    var segredos = [2,4,6,8];


    // Essa parte não foi entendida
    document.addEventListener('keypress', function(e){
       if(e.which == 13){
          verifica();
       }
    },false);
    // Fim da parte não entendida


    function verifica(){
        var achou = false;
        for(var posicao = 0; posicao < segredos.length; posicao++){
            if(entrada.value == segredos[posicao]){
                alert("Você acertou!");
                achou = true;
                break;
            }
        }
            entrada.value = "";
            entrada.focus();
        if(achou == false){
            alert("Você errou.");
        }
    }
    var botão = document.querySelector("button");
    botão.onclick = verifica;

</script>
6 respostas
solução!

Oi André tudo bem?

Vou fazer que nem o outro, duas perguntas duas respostas rsrsrs porque vou demorar analisar o porquê do comportamento estranho do alert.

 document.addEventListener('keypress', function(e){ 
       if(e.which == 13){
          verifica();
       }
    },false);

document.addEventListener é um comando que adciona um gatilho que toda a vêz que acontecer um evento uma função será executada. O evento no caso é keypress que é tecla pressionada e a função é a função criada a seguir onde "e" é o primeiro argumento da função que se refere a tecla pressionada segundo a tabela ASCCI .

Na tabela ASCCI 13 é a tecla enter. Verificamos se a propriedade which do evento keypress é 13 se sim rodamos o verifica() se não não fazemos nada.

O false na última palavra é meio que desnecessário, porque ele fala que o evento tem que ser processado dos filhos antes dos pais (bubble up). Mas o alvo é o documento todo então não tem necessidade nenhuma ao meu ver.

Não consigo fazer o erro do alert aparecer. Mas não se preocupe, no dia a dia ninguém mais usa alert na internet (será por isso que ela é deixada de lado pelos desenvolvedores dos navegadores e pode gerar bugs? não sei). É uma função que você vai usar só nesse curso praticamente. Não é bonita pra apresentar em um site rsrsrsrs.

Hehehe, ok então. Obrigado pela explicação. No entanto, o que seria o bubble up que você citou?

É um conceito complexo que nunca precisei me preocupar e não entendo muito bem rsrs. Aprendi hoje quando fui ver porque tava um false lá.

Se inglês não for barreira pra ti dá uma lidinha nesse artigo https://javascript.info/bubbling-and-capturing

Hehehe, blz, lerei Obrigado.

Disponha e bons estudos!!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software