CODEWITHSUNDEEP
javascripthtml
J Jarvis
J Jarvis

Reputation: 1

how to keep a running total in javascript?

Doing a first course in javascript at college. Have to alter a poker game to add running total amongst other things. Added function updatetotalWinnings at end but can't get working. Been trying different things for ages! Javascript file called in header of html. totalWinnings set to 100 at start. Output in html 'total' line is undefined. 'coin' and 'winnings' html lines give correct output. Please help!

function determineWinnings() {
    var moneyStr;
    var winnings;

    var money = [0, 10, 20, 30, 60, 40, 70, 50, 80, 90];
    moneyStr += "<BR>" + "Winnings for this hand are: " + money[winType] + "    cents";
    winnings = money[winType];

    document.getElementById("money").innerHTML = "<p> " + moneyStr + "</p>"; // This prints "Winnings for this hand are: money[winType] "

    document.getElementById("coin").innerHTML = "<p> " + winnings + "</p>";
    document.getElementById("winnings").src = "coins/" + money[winType] + ".png";

}

function updatetotalWinnings(winnings, totalWinnings) {
    if (winnings > 0) {
        totalWinnings += winnings;
    }

    document.getElementById("total").innerHTML = "<p> " + totalWinnings + "</p>";
}

Thanks a lot to Mike for his very clear explanation, and to Caleb, Mottie, and mhodges for also responding. I have done as Mike and Caleb suggested and declared totalWinnings = 100; above the function (see below). I have also tried putting that line instead at the start of the javascript program where function poker() is defined (see below), both to no effect. I include also the html as requested by Mottie.

var handSize, suits, values, cards, result, winType;    // Defines global variables handsize, suits, values, cards, result, wintype.
var moneyStr, money, winnings;
var totalWinnings = 100;
function poker()
{   
  handSize = 5;                     
  suits = new Array(handSize);      
  values = new Array(handSize);     
  cards = new Array(handSize);      
  result = "";                  
  generateUniqueHandOfCards();
  determineSuitsAndValues();
  orderValuesInDescendingSequence();
  determineCardDescriptions();
  evaluateHandOfCards();
  determineWinType();
  determineWinnings();
  updatetotalWinnings();


  //document.write(result);   
  document.getElementById("cardPara").innerHTML = result;
  document.getElementById("total").innerHTML = "<p>" + totalWinnings + "</p>";
  document.getElementById("total2").innerHTML = updatetotalWinnings();
 }


function determineWinnings()
{
var moneyStr;


  var money = [0, 10, 20, 30, 60, 40, 70, 50, 80, 90];
  moneyStr += "<BR>" + "Winnings for this hand are: " + money[winType] + " cents";  // Note money[winType] is a number giving the cents won.
  winnings =  money[winType];

// document.getElementById("money").innerHTML = "<p> " + moneyStr + "</p>"; // This prints "Winnings for this hand are: money[winType] "

   document.getElementById("coin").innerHTML = "<p> " + winnings + "</p>"; // Prints winnings without accompanying text.
   document.getElementById("winning").src = "coins/" + money[winType] + ".png"; // Note since money[winType] is not a string it is not in quotes.

}
var totalWinnings = 100;

function updatetotalWinnings(winnings)
{
    if (winnings > 0){

        totalWinnings += winnings;

    }


}

<!DOCTYPE html>
<html>
  <head><title>Assignment 2 Poker Game</title>
    <script src= "PokerAssignment10.js">
    </script>
  </head>
  <body>



<button id="button1" onclick="poker()"> Run Poker Game! </button>

    <p> </p> <!-- Inserts a blank paragraph after the Run Poker Game! button -->    


<!-- Lines 21-25 initially put five card_back images side by side.
    Once the function poker has run by clicking on  "Run Poker Game" button, 
    the id="card"+i flag is used to put the image for each card dealt side-by-side.
-->

<img id="card0" src="card_back.png" alt="card_back" width="100" height="145">  
<img id="card1" src="card_back.png" alt="card_back" width="100" height="145">
<img id="card2" src="card_back.png" alt="card_back" width="100" height="145">
<img id="card3" src="card_back.png" alt="card_back" width="100" height="145">
<img id="card4" src="card_back.png" alt="card_back" width="100" height="145">

    <p> </p>
    <p> </p>

    <p id="cardPara"> Hand type dealt will appear here </p>




<p id="money"> </p>



<p id="coin"> </p> 

<p>
<img id="winning"  alt="Winnings will appear here" height="60" > 
<!-- Note leaving out the img src= attribute, html lists the alt= text string "Winnings will appear here" instead  -->
<!-- Using document.getElementById("winning").src =  source location in javascript then replaces text string with image -->
</p>

<p id="total"> </p>

<p id="total2"> </p>


  </body>
</html>

I still get 100 displayed for totalWinnings in id= "total" in the html page and undefined displayed for updatetotalWinnings in id= "total2" in the html page.

Upvotes: 0

Views: 6197

Answers (1)

Mike Cluck
Mike Cluck

Reputation: 32511

Situations like this show you how useful different scopes are. Consider this example:

function add2() {
  var total = 0;
  total += 2;
  console.log(total);
}

In this case, it will always print 2 because total is declared inside of the function. That same kind of issue happens if we pass a variable into a function.

function add2(total) {
  total += 2;
  console.log(total);
}
var total = 0;
add2(total); // 2
add2(total); // 2
console.log(total); // 0

In this case, you passed in an external variable but it wasn't updated. What's up with that? In Javascript, numbers are passed in "by value". This means a copy of the value of a variable is passed into the function. Since it's a copy, it doesn't update the original variable. Objects/arrays are passed "by reference". How that differs from "by value" is outside of the scope of this answer but good to know in the future.

So how do we get a persistent value? One way of doing that is to declare the variable outside of a function then reference it inside of the function.

var total = 0;
function add2() {
  total += 2;
  console.log(total);
}
add2(); // 2
add2(); // 4
add2(); // 6

This works because we're referencing the actual original variable instead of creating a copy or creating a new variable every time we call the function.

So the simplest solution to your problem is to declare totalWinnings outside of the function then reference it inside of other functions.

Upvotes: 2

Related Questions