How do I use inner.HTML in a function?

Question

I tried to create a Html / Js money counter but if i update, it updates one tick and then it resets itself to an old value. I tried creating a function named update and let it run every time the money value changes, but that did not work either.

<html>
<head>
<title>Betting Simulator Test!</title>
</head>

<body>
    <br/>
    <p id="p1">You have 500$</p>
    <br/>
    <form name="CoinFlip" action="" onsubmit="Create()" method="post">
    Coins: <input type="text" name="Csubmit">
    <input type="submit" value="Flip the Coin">
    </form>

    <script type="text/javascript">
        Balance = 500;
        function Game() {
            if(Balance >= 1) {
                var Coin = confirm("You have put " + sub + "$ in the CoinFlip!");
                if(Coin == true) {
                    var flip = true
                    if(flip == true) {
                        alert("You won " + sub + "$");
                        Balance = Balance + sub*2 - sub;
                        Update = document.getElementById("p1").textContent="You have " + Balance + "$";

                    } else {
                        alert("You lost " + sub + "$");
                        Balance = Balance - sub; 
                        Update = document.getElementById("p1").textContent="You have " + Balance + "$";
                    }
                } else {
                }                   
            } else {
                alert("You ran out of Money");
            }
        }       

    function Create() {
        sub = document.forms["CoinFlip"]["Csubmit"].value;
        if(sub <= Balance && sub > 0) {
            Game();
        } else {
            alert("value does not make any sense!");
        }
    }
    </script>
</body>

`var flip = true` lacks a semicolon (`;`). Also, why do you have an empty else-clause? — RaminS, Mar 30 '16 at 22:06
It's not the text that is reset, it's the whole page that is refreshed because you just submitted the form. — blex, Mar 30 '16 at 22:11
What are you trying to accomplish? We can help you with that. — RaminS, Mar 30 '16 at 22:20
I am trying to create a roulette that either doubles your money or takes it away from you — , Mar 30 '16 at 23:21

score 1 · Accepted Answer · edited May 23 '17 at 11:53

You have multiple problems. The first one is that you submit a form each time you play, so the page refreshes, and everything is lost. You could find a workaround to avoid this (see this), but in this case, a form is really not needed.

Also, the user is always going to win because you always set flip to true. You can simulate a random win by using this snippet:

var win = Math.round( Math.random() ); // 1 or 0 (truthy or falsy)

Here is a working example:

var balance = 500;

document.getElementById('flip').addEventListener('click', play);

function play(){
    // parseInt() converts a String to an integer (10 is for decimal base)
    var bet = parseInt(document.getElementById('bet').value, 10);

    if(bet <= balance && bet > 0)
    {
        var accepted = confirm("Do you really want to bet " + bet + "$?");
        if(accepted)
        {
            var win = Math.round( Math.random() ); // Random win
            if(win)
            {
                alert("You won " + bet + "$!");
                balance += bet;
            }
            else
            {
                alert("You lost " + bet + "$...");
                balance -= bet;
            }
            if(!balance){ alert('You ran out of money...'); }
            document.getElementById('p1').textContent = "You have " + balance + "$";
        }
        document.getElementById('bet').value = 0;
    }
    else
    {
        alert("Your bet makes no sense!");
    }
}

<p id="p1">You have 500$</p>
<p>Coins: <input type="number" value="0" id="bet"> <button id="flip">Flip the coin</button>

thank you that realy helps, i am new to programming so i didn´t know about those codes! — , Mar 30 '16 at 22:33

How do I use inner.HTML in a function?

1 Answers1