[Dúvida] Duvidas no tratamento dos campos | JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

Tenho duas dúvidas.

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?
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>

Olá, Marcus.

Tudo bem?

Vamos tentar resolver suas dúvidas uma a uma.

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>

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.

Mergulhe em programação