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

Tentativas com while

Olá, Gostaria de fazer tentativas e utilizar o while. Vi que fizeram com o if, mas queria ver se teria como usar o while mesmo, para ficar menos verboso, ou até mesmo com o for. Quando executo e a resposta é errada, o alert aparece três vezes ao invés de dar a possibilidade de o usuário tentar 3 vezes. Já coloquei a variável input logo abaixo do while (para na hora do loop passar por ela primeiro), porém ocorre o mesmo problema.

<meta charset="UTF-8">

<input>
<button>Compare</button>

<script>

    var input = document.querySelector("input");
    var numero = Math.round(Math.random()*10);
    var button = document.querySelector("button");
    console.log (numero)
    var contador = 1

    function verifica (){
        while(contador <= 3){

        if (input.value == numero){
            alert("Parabéns! O número sorteado foi " + numero + ".");
            break;

        }else{
            alert("Que pena! Você errou.");
        }

        contador++

    }

    }

    button.onclick = verifica;

</script>
3 respostas
solução!

Oi, Angélica, quando você clica no botão e dispara sua função verifica, o loop não vai parar para te deixar fazer outra tentativa, a menos que você acerte de primeira e ele pare com o break. Do jeito que está, se você errar, ele continua o loop usando o valor que estava no input quando você clicou, por isso surgem três alerts seguidos de erro.

Uma solução seria adicionar o incremento do contador e um break após o else, e um if antes do loop que vai verificar se o contador chegou a 3, quebrando a função e não deixando mais o usuário fazer tentativas, sempre mostrando o alert de "fim de jogo". Assim, o loop não rodar infinitamente se errar, vai continuar incrementando o contador e vai verificar, no início da função, se as tentativas acabaram, dando um return e encerrando a função, antes do loop iniciar:

<meta charset="UTF-8">

<input>
<button>Compare</button>

<script>

    var input = document.querySelector("input");
    var numero = Math.round(Math.random()*10);
    var button = document.querySelector("button");
    console.log (numero)
    var contador = 1;

    function verifica (){
      if (contador > 3) {
        alert("Suas tentativas acabaram! Fim de Jogo!");   
      }

      while(contador <= 3){
        if (input.value == numero){
          alert("Parabéns! O número sorteado foi " + numero + ".");
          return;        
        } else {
          alert("Que pena! Você errou.");
          contador++;
          return;
        }        
      }
    }

    button.onclick = verifica;

</script>

Mas veja que, dessa forma, o while acaba sendo até meio esquisito de se usar, pois tem um break em ambas as condições dele, acaba que ele nem precisa ficar verificando se o contador é menor ou igual a 3, então poderia se usar apenas ifs condicionais, ali, sem problemas. É sempre bom avaliarmos em quais casos é vantajoso se usar loops.

Muito obrigada!!! No caso, por que o return se faz necessário?

Depende, o return serve para trazer, para fora, algum valor obtido dentro da função e, por consequência, ele encerra a função. Nesse caso, não estamos retornando nada, só encerrando.

Nesse caso, supondo que as tentativas se esgotem, o return não seria, mesmo, necessário, pois mesmo sem ele, o loop não se iniciaria, afinal a condição contador <= 3 seria false, mas vamos supor que você escreva algum outro bloco de código depois do seu loop. Ele será executado, pois a função não foi encerrada, apenas pulou a parte do loop, então, coloquei o return para garantir que a função seja finalizada no começo.

Agora, se você quiser que outra parte da função seja executada, teria que tirar o return dali, pois aí, ele pularia o loop e continuaria lendo o resto da função (caso exista).

Inclusive, poderia-se trocar os breakpor returnpois o loop está dentro de uma função.

Ah, eu editei o código da minha resposta, pois eu tinha declarado o contador como 0, em vez de 1, então troquei para ficar igual a como você havia feito. Mas o resultado é o mesmo.