HTML String on Object Property Won't Update

Question

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.

faction is another property, I just trimmed it down to keep this post from getting cumbersome, but I can see that omission causing confusion. — Kevin H., Aug 31 '18 at 23:22

Marvin · Accepted Answer · 2018-08-29T21:27:48.657

0

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

edited Aug 29 '18 at 21:27

answered Aug 29 '18 at 19:04

Marvin

853
2
14
38

Thanks Marvin, I'm giving that a shot now, and and am turning up a `Reference Error: img is not defined`. It doesn't get caught on the `faction` or `name` variables just before, however. Adding `this.propname` inside the `
` tags doesn't error, but doesn't update either. Is it maybe variables as `
` content it dislikes?
– Kevin H. Aug 29 '18 at 20:55
Hello Kevin, sorry for the confusion, I forgot that you can only use it if it is a parameter. I will edit my post – Marvin Aug 29 '18 at 21:25
So, in other words, you prepend `this.` for properties that are not passed in as an argument when defining an instance of the object (and calling the constructor). You must simply use the property variable name when it is _not_ a parameter and defined as `this.propertyname = propertyname` above – Marvin Aug 29 '18 at 21:30

HTML String on Object Property Won't Update

1 Answers1