Dynamic Rendering

JavaScript
1

Is it possible to dynamically render html using a class?

This is for my RPG Practice Project. I’m trying to see if I can dynamically render button options according to the amount I want for each “location”.

UPDATE: So yeah, it does turn out you can dynamically render HTML using a class.

The only issue I’m having right now is trying to allocate a function to the button’s onclick attribute.

Focus code:
class Button { constructor(id, btnFunction, btnLabel, additionalStyles = ""){ this.id = id; this.btnFunction = btnFunction; this.btnLabel = btnLabel; this.additionalStyles = additionalStyles; } renderBtn(){ return
${this.btnLabel}
; } }
I did try to append “()” to the interpolated function, but the program is not having it.

(Also, how do I properly group the code here?)

2

Probably need more information on what exactly you’re trying to do so people can get a better idea, and give a more thorough answer, but yes you can dynamically render HTML

1 Like
3

Update (Proper):

I properly formatted the code, and the code in the updated post was incorrect.

The only issue I’m having right now for this is allocating the function associated with the button by the o click attribute.


class Button {
  constructor(id, btnFunction, btnLabel, additionalStyles = ""){         
    this.id = id;
    this.btnFunction = btnFunction;
    this.btnLabel = btnLabel;
    this.additionalStyles = additionalStyles;
  } 
 renderBtn(){
   return `
      <button id="${this.id}" onclick="${this.btnFunction}" style="${this.additionalStyles}">${this.btnLabel}</button>
    `;
  }
}