Creating Lucky 7's game using raw Javascript, what am I doing wrong?
<p>I've decided to come to the wise ones of stack overflow, in hopes of gaining some insight to my problem. I'm a newbie to javascript, and the school i'm attending has given us an assignment to create a Lucky 7's program.</p>

<p>The instructions are that a user places a bet, clicks play, and two dice are rolled. If the dice total is 7, $4 is added to the users bet, if not, $1 is subtracted.</p>

<p>Once the player reaches $0, a table showing the results is displayed. The results shown are "Starting Bet", "Total Rolls Before Going Broke", "Highest Amount Won", and "Roll count from Highest Amount Won".</p>

<p>So far I've got most of it working, but the results are always similar: All results are the same as the starting bet, except the highest amount won, that is always 1 less than the starting bet.</p>

<p>Could it have something to do with my while loop? I've tried moving things around and changing the assignment operators to <code>+=</code> instead of <code>bet = bet + 4</code>, but it's always the same. Any input would be much appreciated!</p>

<pre><code>function hideResults() {
    document.getElementById("results").style.display = "none";
} 

function play() {
    var startingBet = document.getElementById("betInput").value;
    var bet = startingBet;
    var dice1 = Math.floor(Math.random() * 6) + 1;
    var dice2 = Math.floor(Math.random() * 6) + 1;
    var diceRoll = dice1 + dice2;
    var betsArray = [];

    while (bet &gt; 0) {
        if(diceRoll != 7) {
            bet -= 1
        } else { 
            bet += 4
        }
        betsArray.push(bet)
    }

    var rollCounter = betsArray.length;
    var highestAmount = Math.max.apply(Math, betsArray);
    var highestPosition = betsArray.indexOf(highestAmount);
    var rollsFromHighest = rollCounter - highestPosition;

    function showResults() {
    document.getElementById("results").style.display = "inline";
    document.getElementById("playButton").innerHTML = "Play Again";
    document.getElementById("resultsBet").innerHTML = "$" + startingBet +".00";
    document.getElementById("resultsRollCounter").innerHTML = rollCounter;
    document.getElementById("resultsHighestHeld").innerHTML = "$" +     highestAmount + ".00";
    document.getElementById("resultsRollsFromHighest").innerHTML = rollsFromHighest;
    };

    showResults();
} 
</code></pre>

<p>The HTML:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Lucky Sevens&lt;/title&gt;
    &lt;link href="css/LuckySevensStyles.css" rel="stylesheet" type="text/css"&gt;
    &lt;script type="text/javascript" src="js/LuckySevensV1.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="hideResults()"&gt;

    &lt;!-- BET STUFFS --&gt;

&lt;div id="gameDiv"&gt;
    &lt;h1&gt;Lucky Sevens&lt;/h1&gt;
    &lt;span&gt;Starting Bet:&lt;input type="number" name="Starting Bet" id="betInput" placeholder="$0.00"&gt;&lt;/span&gt;
        &lt;br/&gt;
            &lt;button onclick="play()" id="playButton"&gt;Play&lt;/button&gt;
        &lt;/form&gt;
    &lt;/div&gt;

    &lt;!-- RESULT STUFFS --&gt;

    &lt;div id="results"&gt;
        &lt;table&gt;
        &lt;caption&gt;&lt;h2&gt;Results&lt;/h2&gt;&lt;/caption&gt;
            &lt;tr&gt;
                &lt;th&gt;Starting Bet&lt;/th&gt;
                &lt;th id="resultsBet"&gt;&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Total Rolls Before Going Broke&lt;/td&gt;
                &lt;td id="resultsRollCounter"&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Highest Amount Won&lt;/td&gt;
                &lt;td id="resultsHighestHeld"&gt;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Roll Count at Highest Amount Won&lt;/td&gt;
                &lt;td id="resultsRollsFromHighest"&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>