Search code examples
domconcatenationjavascript-objectsobject-properties

HTML String on Object Property Won't Update

I have an object constructor that sets some properties, and later uses them to concatenate a string to write to the DOM. I can see that this works in some cases, but not in others.

function Fighter(name, level, attackPts, defencePts, imgSource) {

        // TRUNCATED PROPERTY ASSIGNMENTS AREA:
        this.attackPts = attackPts;
        this.defencePts = defencePts;

        // DOM ELEMENT CONSTRUCTORS:    
        this.img = "style='background: #444 url(" + imgSource + ") no-repeat center'";
        this.char_card_name = "<h3>" + this.name + "</h3>";
        this.char_card_hitdef = "<h4>" + this.attackPts + "/" + this.defencePts + "</h4>";
        this.char_card = "<div class='fighter " +  faction + "' " + "id='" + this.name + "'>" + this.img + this.char_card_name + this.char_card_hitdef + "</div>";

In a game function later on I modify the attack and defense points for this "Fighter" object, and that works as expected, and my console.log() tests verify that the concatenated properties also update . . . . up until the final string to pull it all together and display:

this.char_card = "<div class='fighter " +  faction + "' " + "id='" + this.name + "'>" + this.img + this.char_card_name + this.char_card_hitdef + "</div>";

When I log this property, those attack and defense numbers don't budge, even though they update successfully in the previous property, this.char_card_hitdef

What could I be overlooking here? I crawled all over the web looking for scope or variable reference issues, but my log statements bring me right back to this one pinching point.

Solution

  • Because you are still in the constructor, you need to refer to the variables without this. that are a parameter AND property of the Object Fighter.

    So change this.char_card = "<div class='fighter " + faction + "' " + "id='" + this.name + "'>" + this.img + this.char_card_name + this.char_card_hitdef + "</div>";

    to

    this.char_card = "<div class='fighter " + faction + "' " + "id='" + name + "'>" + this.img + this.char_card_name + this.char_card_hitdef + "</div>"

    And all other properties that refer to properties above them.

    You can read more about constructors here