title: Javascript variable keep resetting itself after function has run
body: <p>I have some code that is for a game and there is a variable called profit and it will show the user the total profit they have made. But every time you click the open cards button and the function runs it resets its self back to 0 and adds the worth values again.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;article id="moneysys"&gt;
      &lt;div class="cash"&gt;Cash Spent: &lt;span id="cash"&gt;0&lt;/span&gt;&lt;/div&gt;
      &lt;div class="cash"&gt;Pack Price: &lt;span id="packprice"&gt;50&lt;/span&gt;&lt;/div&gt;
      &lt;div class="cash"&gt;Profit: &lt;span id="totprofit"&gt;0&lt;/span&gt;&lt;/div&gt;
  &lt;/article&gt;
  &lt;main&gt;
      &lt;center&gt;
          &lt;button class="open" id="conferm" onclick="opencards()"&gt;Open Cards.&lt;/button&gt;
          &lt;br /&gt;
          &lt;div class=card-group&gt;
              &lt;img class="card" src="images/blank.png" id="canvas" /&gt;
              &lt;div class="attatch"&gt;
                  &lt;div class="stats"&gt;Dammage: &lt;span id="s1"&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="stats"&gt;Health: &lt;span id="s2"&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="stats"&gt;Worth: &lt;span id="s3"&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="stats"&gt;Intelligence: &lt;span id="s4"&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=card-group&gt;
              &lt;img class="card" src="images/blank.png" id="canvas1" /&gt;
              &lt;div class="attatch"&gt;
                  &lt;div class="stats"&gt;Dammage: &lt;span id="s5"&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="stats"&gt;Health: &lt;span id="s6"&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="stats"&gt;Worth: &lt;span id="s7"&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="stats"&gt;Intelligence: &lt;span id="s8"&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=card-group&gt;
              &lt;img class="card" src="images/blank.png" id="canvas2" /&gt;
              &lt;div class="attatch"&gt;
                  &lt;div class="stats"&gt;Dammage: &lt;span id="s9"&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="stats"&gt;Health: &lt;span id="s10"&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="stats"&gt;Worth: &lt;span id="s11"&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="stats"&gt;Intelligence: &lt;span id="s12"&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="card-group"&gt;
              &lt;img class="card" src="images/blank.png" id="canvas3" /&gt;
              &lt;div class="attatch"&gt;
                  &lt;div class="stats"&gt;Dammage: &lt;span id="s13"&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="stats"&gt;Health: &lt;span id="s14"&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="stats"&gt;Worth: &lt;span id="s15"&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="stats"&gt;Intelligence: &lt;span id="s16"&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/center&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p><strong>JAVASCRIPT</strong></p>
  
  <pre><code>var cards = new Array("images/1.png", "images/2.png", "images/3.png", "images/4.png", "images/5.png","images/6.png", "images/7.png", "images/8.png", "images/9.png");
  
  function opencards(){
      var pc = document.getElementById("packprice").innerHTML;
      var cc = document.getElementById("cash").innerHTML;
      var cash = Number(cc) + 50;
      var cardnum = Math.floor(Math.random() * cards.length);
      var s1 = Math.floor(Math.random() * 100);
      var s2 = Math.floor(Math.random() * 100);
      var s3 = Math.floor(Math.random() * 100);
      var s4 = Math.floor(Math.random() * 100);
      var s5 = Math.floor(Math.random() * 100);
      var s6 = Math.floor(Math.random() * 100);
      var s7 = Math.floor(Math.random() * 100);
      var s8 = Math.floor(Math.random() * 100);
      var s9 = Math.floor(Math.random() * 100);
      var s10 = Math.floor(Math.random() * 100);
      var s11 = Math.floor(Math.random() * 100);
      var s12 = Math.floor(Math.random() * 100);
      var s13 = Math.floor(Math.random() * 100);
      var s14 = Math.floor(Math.random() * 100);
      var s15 = Math.floor(Math.random() * 100);
      var s16 = Math.floor(Math.random() * 100);
      document.getElementById("canvas").src = cards[cardnum];
      document.getElementById("s1").innerHTML = s1;
      document.getElementById("s2").innerHTML = s2;
      document.getElementById("s3").innerHTML = s3;
      document.getElementById("s4").innerHTML = s4;
      document.getElementById("canvas1").src = cards[cardnum];
      document.getElementById("s5").innerHTML = s5;
      document.getElementById("s6").innerHTML = s6;
      document.getElementById("s7").innerHTML = s7;
      document.getElementById("s8").innerHTML = s8;
      document.getElementById("canvas2").src = cards[cardnum];
      document.getElementById("s9").innerHTML = s9;
      document.getElementById("s10").innerHTML = s10;
      document.getElementById("s11").innerHTML = s11;
      document.getElementById("s12").innerHTML = s12;
      document.getElementById("canvas3").src = cards[cardnum];
      document.getElementById("s13").innerHTML = s13;
      document.getElementById("s14").innerHTML = s14;
      document.getElementById("s15").innerHTML = s15;
      document.getElementById("s16").innerHTML = s16;
      document.getElementById("cash").innerHTML = cash;
      var worth1 = document.getElementById("s3").innerHTML;
      var worth2 = document.getElementById("s7").innerHTML;
      var worth3 = document.getElementById("s11").innerHTML;
      var worth4 = document.getElementById("s15").innerHTML;
      var profit = Number(worth1) + Number(worth2) + Number(worth3) + Number(worth4);
      document.getElementById("totprofit").innerHTML = profit;
  };
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>article{
      height: 500px;
      width: 200px;
      background-color: white;
      font-family: Impact, fantasy;
      border-radius: 10px;
      border: groove #0000FF 10px;
      overflow: hidden;
      float: right;
      margin-top: 100px;
      right: 5px;
  }
  .open{
      margin-top: 50px;
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
  }
  .cash{
      text-align: left;
      font-size: 30px;
      background-color: #CC3399;
      text-decoration: overline underline;
  }
  .card {
    height: 300px;
    width: 200px;
  }
  .card-group {
    float: left;
    margin: 10px;
  }
  .stats {
    vertical-align: middle;
  }
  
  .attatch {
    width: 200px;
    height: 72px;
    border: 2px solid black;
  }
  </code></pre>