How to manipulate a span element using pure JS

2

My question in this exercise is how to keep my total points fixed, because whenever the function is executed the value changes and it automatically returns to the value 100. So how should I manipulate this span? Or was my approach 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;
    }
}
    
asked by anonymous 27.03.2018 / 19:56

1 answer

3

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

Place type="button" on the button and it will behave as a click-only button:

<button type="button" onclick="geralNumeroAleatorio()">Jogar</button>
    
27.03.2018 / 20:02