Imprimindo na tela 3 tentativas antes de clicar no button | JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

2
respostas

por JONATAS DA COSTA SILVA

| 27.1k xp | 4 posts

Olá! tentei mesclar oq aprendemos na outra aula sobre o programa de adivinhar o numero com essa do button, porem antes mesmo do usuário inserir o valor e clicar no button esta sendo exibido todas as três tentativas como erro. Desde ja agradeço!

<meta charset="UTF-8">
<input/>
<button>clique aqui</button>

<script>

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

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

function pulaLinha(){
    document.write("<br>");
}
function mostra(frase){
    document.write(frase);
    pulaLinha();
}
function exibeResultado(){
    alert(Input.value);
}
function sorteio(){
    return Math.round(Math.random()* 2);
}
var numeroPensado = sorteio();
var tentativas = 1; 

while(tentativas <=3){

    var chute = parseInt(document.querySelector("button"));
    button.onclick = exibeResultado;

    if(chute == numeroPensado){
        mostra("você Acertou o numero pensado foi: "+ numeroPensado);
        break;
    } else{
        mostra("Você errou!");
        pulaLinha();

        mostra("você esta na "+ tentativas + "° tentativas");

    }

    tentativas ++;
}

</script>

2 respostas

por Murillo Godoi Pedroso

| 720.3k xp | 1256 posts

Alura Scuba Team

09/03/2022

Oi, Jonatas, como vai?

O problema do seu código é que pela forma que você estruturou ele está sendo executado instantaneamente, sem deixar você preencher o input e apertar o botão. Para funcionar de forma correta é preciso criar uma função que ficará vinculada com o clique de botão, assim será possível verificar se o valor do input bate com o número pensado.

Acredito que este código de exemplo vai te ajudar:

<meta charset="UTF-8">
<input/>
<button>clique aqui</button>

<script>

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

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


function sorteio(){
    return Math.round(Math.random()* 2);
}
var numeroPensado = sorteio();
var tentativas = 1; 

button.onclick = verificaNumero

function verificaNumero(){
    var numeroDigitado = parseInt(input.value);
    if(numeroDigitado == numeroPensado){
        alert("Parabéns, você acertou!");
        tentativas =1;
    }else{
      alert("Você errou!");
      alert("você esta na "+ tentativas + "° tentativas");
      tentativas++;

      if(tentativas > 3) {
        alert("Você perdeu, acabaram suas tentativas!");
        alert("o número era " + numeroPensado);
        tentativas = 1;
      }
    }
}

</script>

Nesse código criei uma função que é executada quando o botão é clicado, ou seja, quando a pessoa após inserir valor no input clica no botão. Assim consigo verificar realmente se o número inserido bate com o escolhido.

Outra coisa, é que manipulei a variável tentativas dentro da função, aumentando o valor dela quando a resposta for errada ou restaurando o valor dela para o inicial quando a resposta for certa ou quando o número de tentativas acabarem. Essa manipulação substituiu o uso do while.

Espero ter ajudado.

Abraços e bons estudos!

por Arthur Leonel

| 189.1k xp | 37 posts

20/03/2022

Minha versão...

<meta charset="utf-8">

<input>
<button>O segredo está entre 0 e 10</button>

<script type="text/javascript">

    var segredo = Math.round(Math.random() * 10);

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

    var contador = 1;

    function verifica(){
        if (input == segredo) {

            alert("Você acertou!");
            button.onclick = false;

        } else if(contador == 3) {

            alert("Chances esgotadas!");
            button.onclick = false;

        } else {

            alert("Você errou!");
            contador ++;

        }
    }

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

    alert("Descubra o segredo! você tem 3 chances!")

</script>