CODEWITHSUNDEEP
javascriptclassproperties
ChickenOverlord
ChickenOverlord

Reputation: 162

When modifying a property on one instance of a class, that property on all instances of the class are changed

My background is mostly with Python and C#, but I'm helping a friend who is taking a beginning JavaScript class learn to code. The class ended this week, but it never covered how to do classes in JavaScript so I thought I'd throw together an example really quick to illustrate how they work. The only problem is that whenever I change the value of a property on one instance of the class, that property is changed on all instances. Is there a way to make this work?

Basically when I deal damage to troll1, the health of troll2 should still be 10 (and vice versa). Instead, if I deal three damage to troll1, the health of troll2 and troll3 also become 7.

I've tried setting health outside of the constructor, but then I get errors when calling the class methods saying that health is not defined (regardless of if I use this.health or just health).

Here's the html and js for the example I made:

class trollEnemy {

  constructor() {
    this.health = 10;
  }


  takeDamage(damageAmount) {
    this.health = this.health - damageAmount;
    if (this.health > 0) {
      document.getElementById("outputDiv").innerHTML = "Dealt " + damageAmount + " damage to the troll, the troll now has " + this.health + " health left";
    } else {
      document.getElementById("outputDiv").innerHTML = "Dealt " + damageAmount + " damage to the troll, the troll is now dead";
    }
  }

  getHealth() {
    if (this.health > 0)
      document.getElementById("outputDiv").innerHTML = "The troll has " + this.health + " health left";
    else
      document.getElementById("outputDiv").innerHTML = "The troll is dead";
  }

}

var troll1 = new trollEnemy();
var troll2 = new trollEnemy();
var troll3 = new trollEnemy();

function generateNewTroll(trollNumber) {
  switch (trollNumber) {
    case 1:
      troll1 = new trollEnemy();
    case 2:
      troll2 = new trollEnemy();
    case 3:
      troll3 = new trollEnemy();
  }
}

function damageTroll(trollNumber) {
  switch (trollNumber) {
    case 1:
      troll1.takeDamage(document.getElementById("trollDamageAmount").value);
    case 2:
      troll2.takeDamage(document.getElementById("trollDamageAmount").value);
    case 3:
      troll3.takeDamage(document.getElementById("trollDamageAmount").value);
  }
}

function checkTrollHealth(trollNumber) {
  switch (trollNumber) {
    case 1:
      troll1.getHealth();
    case 2:
      troll2.getHealth();
    case 3:
      troll3.getHealth();
  }
}
<button onclick="generateNewTroll(1)">Generate New Troll #1</button><button onclick="damageTroll(1)">Deal Damage To Troll #1</button> <button onclick="checkTrollHealth(1)">Check Troll #1 Health</button><br>
<button onclick="generateNewTroll(2)">Generate New Troll #2</button><button onclick="damageTroll(2)">Deal Damage To Troll #2</button> <button onclick="checkTrollHealth(2)">Check Troll #2 Health</button><br>
<button onclick="generateNewTroll(3)">Generate New Troll #3</button><button onclick="damageTroll(3)">Deal Damage To Troll #3</button> <button onclick="checkTrollHealth(3)">Check Troll #3 Health</button> Enter the amount of damage you want to deal to a
troll: <input type="text" id="trollDamageAmount">

<br>

<div id="outputDiv">Test</div>

Upvotes: 1

Views: 53

Answers (1)

Mark
Mark

Reputation: 92440

You need to put break statements in switch statements otherwise they all get called:

switch(trollNumber)
    {
        case 1:
            troll1.getHealth();
            break
        case 2:
            troll2.getHealth();
            break
        case 3:
            troll3.getHealth();
            break
    }

Without a break things pass through for example:

let trollNumber = 1
switch(trollNumber)
    {
        case 1:
            console.log(1)
        case 2:
           console.log(2)
        case 3:
           console.log(3)
    }

You might be happier if you stored your trolls in an array. This would simplify everything. For example you could write functions like:

function damageTroll(trollNumber){
   trolls[trollNumber].getHealth()
}

Upvotes: 3

Related Questions