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

Melhorando meu input

Olá amigos. Estou desenvolvendo um pequeno trabalho pra faculdade e me baseei nessa aula, já que sou iniciante tive uma boa base com essa aula para começar a lógica que precisava. Só queria que o input não fosse enviado vazio e nem que eu conseguisse digitar letras, se possível apenas números. Pois seria um jogo de adivinhação de 1 a 100 com 7% de chance de acerto(nesse exemplo). Obrigado!

<meta charset="UTF-8">

<title>Trabalho Javascript</title>

<form>

  <h1>Trabalho Javascript</h1>

  <input type="text" name ="numbers" required="required" maxlength="3" id="campo" pattern="[0-9]+$" />

  <button type="submit" id="myBtn">Play!</button>

</form>

<script>

    function sorteia() {

       return Math.round(Math.random() * 100);

    }

    function sorteiaNumeros(quantidade) {

        var segredos = [];

        var numero = 1;

        while(numero <= quantidade) {

              var numeroAleatorio = sorteia();
              var achou = false;

              if (numeroAleatorio !== 0) {
                     for(var posicao = 0; posicao < segredos.length; posicao++) {

                           if(segredos[posicao] == numeroAleatorio){
                                achou = true;
                                break;
                           }

                     }

                     if (achou == false) {
                           segredos.push(numeroAleatorio);
                           numero++;
                     }
              }

        }

        return segredos;

    }

    var segredos = sorteiaNumeros(7);

    console.log(segredos);

    var input = document.querySelector("input");


// Testando código aqui

    var input = document.getElementById("campo");

    input.addEventListener("keyup", function(event) {

      if (event.keyCode === 13) {

       event.preventDefault();
       document.getElementById("myBtn").click();
      }

    });

// Até aqui

    input.focus();

    function verifica() {

       var achou = false;

       for(var posicao = 0; posicao < segredos.length; posicao++) {

              if(input.value == segredos[posicao]) {

                     alert("VOCÊ ACERTOU MEU CONSAGRADO!");
                     achou = true;
                     break;
              } 
       }

       if(achou == false) {

              alert("VOCÊ ERROU MALUCO!");
       }

       input.value = "";
       input.focus();

    }

    var button = document.querySelector("button");


    button.onclick = verifica;
</script>
5 respostas

Oi Artur tudo bem?

Coloque o seu input como type="number" assim ele só irá aceitar números. Pode colocar a propriedade max para número máximo e min para número mínimo.

Espero ter ajudado!!!

Me ajudou, porém ainda não consigo fazer com que o enter não funcione caso não tenha nada. Tenho como fazer isso? Segue o código atualizado.

<meta charset="UTF-8">

<title>Trabalho Javascript</title>

<form>

  <h1>Trabalho Javascript</h1>

  <input maxlength="3" type="number" min="1" max="100" id="campo" onkeypress="if (!isNaN(String.fromCharCode(window.event.keyCode))) return true; else return false;" />

  <button type="submit" id="myBtn">Play!</button>

</form>

<script>

    function sorteia() {

       return Math.round(Math.random() * 100);

    }

    function sorteiaNumeros(quantidade) {

        var segredos = [];

        var numero = 1;

        while(numero <= quantidade) {

              var numeroAleatorio = sorteia();
              var achou = false;

              if (numeroAleatorio !== 0) {
                     for(var posicao = 0; posicao < segredos.length; posicao++) {

                           if(segredos[posicao] == numeroAleatorio){
                                achou = true;
                                break;
                           }

                     }

                     if (achou == false) {
                           segredos.push(numeroAleatorio);
                           numero++;
                     }
              }

        }

        return segredos;

    }

    var segredos = sorteiaNumeros(7);

    console.log(segredos);

    var input = document.querySelector("input");

    input.focus();

    function verifica() {

       var achou = false;

       for(var posicao = 0; posicao < segredos.length; posicao++) {

              if(input.value == segredos[posicao]) {

                     alert("VOCÊ ACERTOU MEU CONSAGRADO!");
                     achou = true;
                     break;
              } 
       }

       if(achou == false) {

              alert("VOCÊ ERROU MALUCO!");
       }

       input.value = "";
       input.focus();

    }

    var button = document.querySelector("button");

    button.onclick = verifica;

</script>
solução!

Coloca o atributo required no input e também coloca no começo da função verifica um if se for vazio para sair

function verifica() {

        if (input.value.trim()==""){
            return;
        }

Muito obrigado André! Resolveu meu problema.

Abraço!

Disponha e bons estudos!!!