为什么全局对象的属性在功能后没有更新？

Question

为什么全局对象的属性在功能后没有更新？

zar*_*x97 5 javascript jquery html-select object

我正在尝试创建一个游戏，第一步是通过html-select进行角色选择。当用户通过功能（包括“开关”）选择一个选项时，先前定义的对象将重新分配其值，我什至可以在功能内部回显那些值，但是当我在功能外部尝试相同的值时不能正确更新。这是代码：

<html>
<head>
<script>
var selectedPlayer = {
        level: 0,
        gold: 1,
        expWorth: 0,
        classLevel: 0,
        experience: 0,
        totalHealth: 0,
        totalEnergy: 0,
        totalAttack: 0,
        totalDefense: 0,
        totalSpeed: 0,
        totalFatigue: 0
};

function switchingCharacter() {
  switch ($("#mySelect option:selected").val()) {    
     case "heracles":
      $("#demo2").text("You selected Heracles");
      selectedPlayer = {
        level: 2,
        gold: 2,
        expWorth: 0,
        classLevel: 0,
        experience: 0,
        totalHealth: 35,
        totalEnergy: 10,
        totalAttack: 51,
        totalDefense: 50,
        totalSpeed: 2,
        totalFatigue: 2
      };
      break;
    case "ra":
      $("#demo2").text("You selected Ra");
      selectedPlayer = {
        level: 1,
        gold: 1,
        expWorth: 0,
        classLevel: 0,
        experience: 0,
        totalHealth: 180,
        totalEnergy: 10,
        totalAttack: 13,
        totalDefense: 8,
        totalSpeed: 2,
        totalFatigue: 2
      };
      break;
    default:
      $("#demo2").text("You didn't select any character");
  }

  $("#hp").text("HP: " + selectedPlayer.totalHealth);
  $("#attack").text("Attack: " + selectedPlayer.totalAttack);
  $("#defense").text("Defense: " + selectedPlayer.totalDefense);
  $("#energy").text("Energy: " + selectedPlayer.totalEnergy);
  $("#speed").text("Speed: " + selectedPlayer.totalSpeed);
  $("#fatigue").text("Fatigue: " + selectedPlayer.totalFatigue);
  $("#gold").text("Gold: " + selectedPlayer.gold);
}

function displaystats() {

  $("#level").text("Level: " + selectedPlayer.level);
}
//Below is something added in 2nd edition
  var testing = selectedPlayer.fatigue;
  function other() {
  $("#log").text(Math.floor(testing));
  }
  other();
console.log(testing);
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>

<body>

  <p>Welcome to Anime Colisseum's System Calculator.</p>

  <p>Select your character below:</p>

  <form>
    <select id="mySelect" onchange="switchingCharacter()">
    <option value="heracles">Heracles</option>  
    <option value="ra">Ra</option>

  </select>
  </form>

  <p id="demo" class=form-control></p>
  <p id="demo2" class=form-control></p>

</body>
<p id=hp></p>
<p id=energy></p>  
<p id=attack></p>
<p id=defense></p>
<p id=speed></p>
<p id=blocks></p>
<p id=fatigue></p>
<p id=gold></p>
<p id=level></p>
<p id=log></p>  <!-- 2edition --->
</html>

Run Code Online (Sandbox Code Playgroud)

我期望带有“ id = level”的p元素将被更改，就像switchCharacter（）中的其他元素一样...

我对编程非常陌生，因此很有可能忽略了一个简单但至关重要的细节。提前致谢。

现在编辑：感谢Zlatko提供的答案，现在我看到我忘记了调用内部的stats更新功能`switchingCharacter()`。仍然存在问题，似乎我在switchingCharacters（）中编写的值似乎没有正确存储在selectedCharacter对象中，`var testing = selectedPlayer.fatigue; function other() { $("#log").text(Math.floor(testing)); } other(); console.log(testing);`例如，通过添加此值，控制台回显了“ undefined”

Answer 1

Zla*_*tko 0

displaystats您在函数末尾缺少对 - 的调用switchingCharacter。这是添加了该行的代码，现在显示级别。

更具体地说，您定义了一个将更新统计数据的函数。但你从来没有叫过它。这就是为什么它不起作用。

顺便说一句，您通常会在单个函数中添加所有其他统计数据显示（无论是它displaystats还是render其他）。因此，您用于切换角色的代码，它只是切换角色（并且可能通知某些“控制器”有更新）。当调用时，您的displaystats代码将只执行显示统计信息，而不执行其他操作。现在，这个“控制器”可以负责何时调用哪个事物 - 例如，按时间间隔或按某些操作等。

<html>
<head>
<script>
var selectedPlayer = {
  level: 1,
  gold: 0,
  experience: 0,
  totalAttack: 0,
  totalDefense: 0,
  totalHealth: 0,
  totalEnergy: 0,
  totalSpeed: 0,
  totalBlocks: 0
};

function switchingCharacter() {
  switch ($("#mySelect option:selected").val()) {    
     case "heracles":
      $("#demo2").text("You selected Heracles");
      selectedPlayer = {
        level: 2,
        gold: 2,
        expWorth: 0,
        classLevel: 0,
        experience: 0,
        totalHealth: 35,
        totalEnergy: 10,
        totalAttack: 51,
        totalDefense: 50,
        totalSpeed: 2,
        totalFatigue: 2
      };
      break;
    case "ra":
      $("#demo2").text("You selected Ra");
      selectedPlayer = {
        level: 1,
        gold: 1,
        expWorth: 0,
        classLevel: 0,
        experience: 0,
        totalHealth: 180,
        totalEnergy: 10,
        totalAttack: 13,
        totalDefense: 8,
        totalSpeed: 2,
        totalFatigue: 2
      };
      break;
    default:
      $("#demo2").text("You didn't select any character");
  }

  $("#hp").text("HP: " + selectedPlayer.totalHealth);
  $("#attack").text("Attack: " + selectedPlayer.totalAttack);
  $("#defense").text("Defense: " + selectedPlayer.totalDefense);
  $("#energy").text("Energy: " + selectedPlayer.totalEnergy);
  $("#speed").text("Speed: " + selectedPlayer.totalSpeed);
  $("#fatigue").text("Fatigue: " + selectedPlayer.totalFatigue);
  $("#gold").text("Gold: " + selectedPlayer.gold);
  displaystats();
}

function displaystats() {

  $("#level").text("Level: " + selectedPlayer.level);
}
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>

<body>

  <p>Welcome to Anime Colisseum's System Calculator.</p>

  <p>Select your character below:</p>

  <form>
    <select id="mySelect" onchange="switchingCharacter()">
    <option value="heracles">Heracles</option>  
    <option value="ra">Ra</option>

  </select>
  </form>

  <p id="demo" class=form-control></p>
  <p id="demo2" class=form-control></p>

</body>
<p id=hp></p>
<p id=energy></p>  
<p id=attack></p>
<p id=defense></p>
<p id=speed></p>
<p id=blocks></p>
<p id=fatigue></p>
<p id=gold></p>
<p id=level></p>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，5 月前
查看次数：	48 次
最近记录：	6 年，5 月前