如何在javascript中保持运行总计？

Question

在大学里用JavaScript做第一门课程。 必须改变扑克游戏以增加跑步总数。 最后添加了功能updatetotalWinnings，但无法正常工作。 多年来一直在尝试不同的东西！ html标头中调用的Javascript文件。 开始时将totalWinnings设置为100。 html“总计”行中的输出未定义。 'coin'和'winnings'html行给出正确的输出。 请帮忙！

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>";
}

非常感谢Mike的明确解释，也感谢Caleb，Mottie和mhodges的回应。 我已经按照Mike和Caleb的建议做了，并宣布totalWinnings = 100; 功能上方（请参阅下文）。 我还尝试过将这行代码放在定义了函数poker（）的javascript程序的开头（请参见下文），两者均无效。 我还根据Mottie的要求包含了html。

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>

我仍然在HTML页面的id =“ total”中的totalWinnings中显示100，而在HTML页面的id =“ total2”中的updatetotalWinnings中未显示。

Answer 1

这样的情况向您展示了不同范围的有用性。 考虑以下示例：

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

在这种情况下，它将始终打印2因为在函数内部声明了total 。 如果我们将变量传递给函数，也会发生同样的问题。

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

在这种情况下，您传入了一个外部变量，但未更新。 那是怎么回事？ 在Javascript中，数字以“按值”形式传递。 这意味着将变量值的副本传递到函数中。 由于是副本，因此不会更新原始变量。 对象/数组“通过引用”传递。 它与“按价值”的区别不在此答案的范围之内，但将来有必要知道。

那么我们如何获得持久的价值呢？ 一种方法是在函数外部声明变量，然后在函数内部引用它。

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

之所以可行，是因为我们每次调用函数时都引用实际的原始变量，而不是创建副本或创建新变量。

因此，最简单的解决方案是在函数外部声明totalWinnings ，然后在其他函数内部引用它。

如何在javascript中保持运行总计？

问题描述

1 个解决方案

解决方案1
0 2016-04-18 16:32:36

如何在javascript中保持运行总计？

问题描述

1 个解决方案

解决方案1 0 2016-04-18 16:32:36

解决方案1
0 2016-04-18 16:32:36