5

I'm trying to create a game, and the first step of it is the character selection through html-select. When the user chooses an option, through function (including a "switch"), a previously defined object has his values re-assigned, and I can even echo those inside the function, but, when I try the same outside the function the values don't update properly. Here is the code:

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

I expected that the p element with the "id=level" would be changed, just as the others inside switchingCharacter() were...

I fairly new to programming so is highly probable that I am, perhaps, overlooking a simple but crucial detail. Thanks in advance.

Now edited: Thanks to the answer provided by Zlatko now I see that I forgot to call the updating stats function inside switchingCharacter(). Still, a problem remains, it doesn't seems as if the values I wrote in switchingCharacters() are being properly stored in the selectedCharacter object, var testing = selectedPlayer.fatigue; function other() { $("#log").text(Math.floor(testing)); } other(); console.log(testing); By adding this, for example, the console echoes "undefined"

1 Answer 1

Reset to default
0

You're missing a call to displaystats - at the end of your switchingCharacter function. Here's your code with the line added, now showing level.

To be more specific, you defined a function which will update the stats. But you never called it. That's why it did not work.

As an aside, you would usually add all the other displaying of stats in a single function (be it displaystats, render or whatever). So your code for switching character, it just switches character (and maybe informs some "controller" that there was an update). Your displaystats code would just be doing display stats, nothing else, when called. Now, this "controller" could be in charge of when to call which thing - e.g. on an interval, or on certain actions etc.

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

3
  • Thank you very much for you fast answer, I can't believe how I missed such a thing. But, there is still an issue, it doesn't seems as if the values I wrote in switchingCharacters() are being properly stored in the selectedCharacter object, var testing = selectedPlayer.fatigue; function other() { $("#log").text(Math.floor(testing)); } other(); console.log(testing); By adding this, for example, the console echoes "undefined"
    – zarex97
    Commented Jun 18, 2019 at 0:37
  • That is happening because initially your testing variable is empty. You need to call that console.log after you have flipped the dropdown.
    – Zlatko
    Commented Jun 19, 2019 at 21:20
  • Additionally, you have to actually take a valid prop. It is called totalFatigue on the player object, but you just take fatigue later in your assignment.
    – Zlatko
    Commented Jun 19, 2019 at 21:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.