How to handle a span element using pure JS

Asked

Viewed 385 times

2

My question in this exercise is how to keep my point total fixed, because whenever the function is executed the value changes and automatically it returns to 100.So how should I manipulate this span ? Or my approach was very wrong in JS ?

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>exercicio-5</title>
</head>
<body>
    <p>
        Vamos criar nosso primeiro jogo! O usuário começa o jogo com 100 pontos. Deve ser apresentado 2 radio buttons,
        com os valores par e impar, e um campo de texto valor da aposta. Após selecionar preencher todos os campos, o
        usuário deve clicar em um botão jogar, então o sistema deve sortear um número aleatório de 1 à 30, e verificar
        se este número é par ou impar. Caso o número seja de acordo com o que o usuário apostou, deve-se somar a
        quantidade de pontos apostados ao seus pontos globais, caso seja diferente deve-se subtrair este valor. <br>
        Não deve ser possível clicar no botão jogar: <br>
        Não deve ser aceito nada além de valores numéricos, maior que zero, no campo valor da aposta.
        O sistema deve apresentar ao usuário qual número foi sorteado e informa-lo se o número é par ou impar. <br>
        Não deve ser possível clicar no botão jogar
        Caso o usuário não possua ou tente apostar uma quantidade de pontos maior do que possui.
        Caso o usuário não informe em qual tipo de número quer apostar.
    </p>
    <form name="formulario">
        <fieldset>
            <p>Vamos brincar !!!</p>
            <p>Escolha um número ENTRE 1 a 30 sendo ele par ou impar e click em jogar , a cada acerto o número escolhido será somano aos pontos caso erre o mesmo será subtraido.</p>
            <p>Boa Sorte !!!</p>
            <h3>Seu número total de pontos é <span id="totalDePontos">100</span></h3>
            <input type="radio" name="parOuImpar">Par
            <input type="radio" name="parOuImpar">Impar <br>
            <label for="valor">Valor da aposta</label>
            <input type="number" id="valor" min="1" max="30">
            <button onclick="geralNumeroAleatorio()">Jogar</button>
        </fieldset>
    </form>
    <script src="JS/javaScript.js"></script>
</body>
</html>

JS Code:

var recebeAposta = 0;
var sorteio = 0;

function geralNumeroAleatorio() {
    if(document.formulario.parOuImpar[0].checked == false && document.formulario.parOuImpar[1].checked == false){
        alert("Por favor escolha entre par ou impar !");
        return false;
    }

    var recebePontos = parseInt(document.getElementById("totalDePontos").innerHTML);
    recebeAposta = parseInt(document.getElementById("valor").value);

    if(recebeAposta < 0 || recebeAposta > 30){
        alert("Aposte números entre 1 a 30 ");
        return false;
    }

    if(recebeAposta > recebePontos){
        alert("aposta invalida");
        return false;
    } else{
        alert("ok");
    }

    sorteio = Math.floor(Math.random()* 30 + 1);
    if(sorteio %2 === 0){
        alert("O número sorteado foi " +sorteio+ " sendo ele Par");
    } else{
        alert("O número sorteado foi " +sorteio + " sendo ele Impar");
    }

    validarPontos(sorteio, recebeAposta);
}


function  validarPontos(recebeSorteio, aposta) {
    if(recebeSorteio === aposta){
        document.getElementById("totalDePontos").innerHTML += aposta
    } else{
        document.getElementById("totalDePontos").innerHTML -=aposta;
    }
}
javascript html5 dom

  • Aside from the problem pointed out in the answer below, your logic is strange. if(recebeSorteio === aposta) does not match the logic described for the game in HTML.

  • The way it is, the person wins only if the number drawn is equal to the amount bet.

  • Our guy you’re right, I was really thinking that the user would only win if their number was drawn. Thanks for the touch .

1 answer

3


Your mistake is in button. Without specifying type, it by default is of type submit and is making a refresh on the page.

Place type="button" on the button and it will behave like a button just to click:

<button type="button" onclick="geralNumeroAleatorio()">Jogar</button>

Browser other questions tagged javascript html5 dom

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