title: Creating Lucky 7's game using raw Javascript, what am I doing wrong?
body: <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>