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

[Dúvida] Duvidas no tratamento dos campos

Tenho duas dúvidas.

  1. Como fazer para o foco mudar para o botão, quando o usuário digitar, para que ele possa pressionar Enter e já chamar o verifica?
  2. Como eu faço para recriar o número "segredo" quando o usuário acertar?

Segue meu código para verificação, caso necessário.

Obrigado.

<meta charset="UTF-8">

<input/>
<button>Compare com o meu segredo</button>

<script>
  var segredo = Math.round(Math.random() * 10);
  var input = document.querySelector('input');
  input.focus();
  
  function verificaNumero() {
    if (input.value == segredo) {
      alert('Você acertou!!!');
    }else {
      alert("Você Errou!!!");
    }
    input.value = "";
    input.focus();
  }

  var button = document.querySelector('button');
  button.onclick = verificaNumero;

</script>
2 respostas
solução!

Olá, Marcus.

Tudo bem?

Vamos tentar resolver suas dúvidas uma a uma.

  1. Mudar o foco para o botão quando o usuário digitar: Para que o foco mude para o botão após o usuário digitar no campo de entrada, você pode adicionar um evento ao campo de entrada que detecta quando a tecla "Enter" é pressionada. Quando isso acontecer, o foco será movido para o botão.

    Aqui está um exemplo de como fazer isso:

    <meta charset="UTF-8">
    
    <input id="input"/>
    <button id="button">Compare com o meu segredo</button>
    
    <script>
      var segredo = Math.round(Math.random() * 10);
      var input = document.querySelector('#input');
      input.focus();
      
      function verificaNumero() {
        if (input.value == segredo) {
          alert('Você acertou!!!');
          // Recria o número segredo
          segredo = Math.round(Math.random() * 10);
        } else {
          alert("Você Errou!!!");
        }
        input.value = "";
        input.focus();
      }
    
      var button = document.querySelector('#button');
      button.onclick = verificaNumero;
    
      // Adiciona um evento ao campo de entrada para detectar "Enter"
      input.addEventListener('keypress', function(event) {
        if (event.key === 'Enter') {
          button.focus();
          verificaNumero();
        }
      });
    </script>
    
  2. Recriar o número "segredo" quando o usuário acertar: Para recriar o número "segredo" quando o usuário acertar, você pode simplesmente gerar um novo número dentro da função verificaNumero, logo após a mensagem de acerto.

    No código acima, já incluí essa funcionalidade dentro da função verificaNumero:

    if (input.value == segredo) {
      alert('Você acertou!!!');
      // Recria o número segredo
      segredo = Math.round(Math.random() * 10);
    }
    

Com essas mudanças, seu código deve funcionar conforme esperado. O foco será movido para o botão quando a tecla "Enter" for pressionada no campo de entrada, e um novo número "segredo" será gerado quando o usuário acertar.

Faça o teste e veja se faz sentido.

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos.

Renan, bom dia. Obrigado pelas explicações. Apliquei aqui e deu certo. Abraços!