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

Question

我正在尝试创建一个游戏，第一步是通过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>

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

我对编程还很陌生，因此很有可能忽略了一个简单但至关重要的细节。预先感谢。

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

Answer 1

在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>

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

1 个答案: