I cannot reduce the value of html span

Asked

Viewed 53 times

0

I am making a guessing game with a number of attempts equal to 3. Whenever the user misses the kick, the number of attempts must fall, but this is not happening. Does anyone know what I’m missing ??

HTML

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Adivinhador</title>
</head>
<body>
<h1>Adivinhador</h1>
    <form name="adivinha" id="adivinha_form" action="#">
        <p>
            Seu chute: <br>
            <input type="text" id="chute" name="chute">
        </p>

        <button onclick="valida()" reset="true">Arriscar</button>

        <p>Tentativas: <span id="tentativa">3</span> </p>
    </form>
    <script type="text/javascript" src="adivinhacao.js"></script> <!-- Para converter valor de span no JS, chamar o innerText -->
</body>
</html>

Javascript

var chute = document.getElementById("chute")
var tentativa = document.getElementById("tentativa")

function valida() {

    var chute2 = parseInt(chute.value)
    var tentativa2 = parseInt(tentativa.innerText)
    var numero = parseInt(1 + Math.random() * 10)
    if(chute2 >= 0 && chute2 <= 10) {
        aleatorio(numero, chute2, tentativa2)
    }
    else {
        alert("Favor digitar um numero de 0 a 10")
    }
}

function aleatorio(numero, chute2, tentativa2) {
    if (chute2 != numero) {
        alert("Você errou! Tente de novo")
        document.getElementById("adivinha_form").reset();
    }
    else if (chute2 != numero && tentativa2 == 2) {
        alert("Suas chances acabaram! O número correto é " + numero)
    }
    else if (chute2 == numero) {
        alert("Parabéns! Você acertou")
    }
}
javascript html

  • You are not updating tentativa

  • I’ve already tried to do this, but whenever I call javascript, the attempt goes back to the original value

  • 2

    document.getElementById("adivinha_form").reset(); This is making you reset the number of attempts to 3 ... You have to put this only when the guy gets it right. or end his attempts.

  • keeps giving error

1 answer

2

var chute;
var tentativa;
var numero;
var i=1;
function valida() {

    chute = parseInt(document.getElementById("chute").value)
    tentativa = parseInt(document.getElementById("tentativa").textContent)
    numero = parseInt(1 + Math.random() * 10)
    if(chute >= 0 && chute <= 10) {
        aleatorio(numero, chute)
    }
    else {
        alert("Favor digitar um numero de 0 a 10")
    }
}

function aleatorio(numero, chute) {
    if ((chute != numero)&&(tentativa > 0)) {
        
        alert("Você errou! Tente de novo")
        
        document.getElementById("chute").value = "";
        
         var x = document.getElementById("tentativa").textContent;
         document.getElementById("tentativa").innerHTML = x-i;
        
    }
    else if (tentativa == 0) {
        alert("Suas chances acabaram! O número correto é " + numero);
        document.getElementById("adivinha_form").reset();
        document.getElementById("tentativa").innerHTML = 3;
        document.getElementById("chute").value = "";
        chute="";
        numero="";
        i=1;
        
    }
    else if (chute == numero) {
        alert("Parabéns! Você acertou");
        document.getElementById("adivinha_form").reset();
        document.getElementById("tentativa").innerHTML = 3;
        document.getElementById("chute").value = "";
        chute="";
        numero="";
        i=1;
    }

}
<form name="adivinha" id="adivinha_form" action="#" onsubmit="return false">
        <p>
            Seu chute: <br>
            <input type="text" id="chute" name="chute" value=""  autofocus>
        </p><br><br>

        <button onclick="valida()" reset="true">Arriscar</button>
        
        <p>Tentativas: <span id="tentativa">3</span> </p>
           
</form>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.