Update a global variable after button is clicked javascript
<p>I tried understanding the solutions to this on past threads but couldn't find exactly what I was looking for.</p>

<p>I have 2 dice that roll when a button is clicked. I want to be able to create a running total of the numbers that result from each roll.</p>

<pre><code>Example: 
Roll 1 is 3+4 = 7 | Running total = 7
Roll 2 is 2+6 = 8 | Running total = 15
Roll 3 is 4+1 = 5 | Running total = 20
</code></pre>

<p>Here is my code. I have a global variable being updated but I get NaN for var running3.</p>

<p>Any help is greatly appreciated while I learn JS. Thank you.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var running2 = null;

function rollDice() {
  var die1 = document.getElementById("die1");
  var die2 = document.getElementById("die2");
  var status = document.getElementById("status");
  var status2 = document.getElementById("status2");
  var d1 = Math.floor(Math.random() * 6) + 1;
  var d2 = Math.floor(Math.random() * 6) + 1;
  var diceTotal = d1 + d2;

  die1.innerHTML = d1;
  die2.innerHTML = d2;

  var running3 = (diceTotal + running2);
  var running2 = running3;
  status.innerHTML = "You rolled " + diceTotal;
  // if(d1 == d2){
  //     status.innerHTML += " DOUBLES! You get a free turn!!";
  // }

  status2.innerHTML = "Your running " + running3;

}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div.dice {
  float: left;
  width: 32px;
  background: #F5F5F5;
  border: #999 1px solid;
  padding: 10px;
  font-size: 24px;
  text-align: center;
  margin: 5px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="die1" class="dice"&gt;0&lt;/div&gt;
&lt;div id="die2" class="dice"&gt;0&lt;/div&gt;
&lt;button onclick="rollDice()"&gt;Roll Dice&lt;/button&gt;
&lt;h2 id="status" style="clear:both;"&gt;&lt;/h2&gt;
&lt;h2 id="status2" style="clear:both;"&gt;&lt;/h2&gt;</code></pre>
</div>
</div>
</p>