Showing class property value on click

I need to display the this.name in the console when clicking the button element.

I could replace inside clicked() and set console.log(myBtn.name) but I’d like this method to work with any object.

Is there a way to do it? When I click I get an empty string.

Thanks!

class Button {
  constructor(name, id) {
    this.name = name;
    this.ref = document.getElementById(id);


    this.init();
  }

  init() {
    this.ref.addEventListener("click", this.clicked);
  }

  clicked() {
    console.log(this.name);
  }
}

let myBtn = new Button('My button', "test");

<button id="test">Click me</button>

Answer

You was almost there

The problem in your code is what this mean in the callback

When the button is pressed this is the button unless you told it otherwise

class Button {
  constructor(name, id) {
    this.name = name;
    this.ref = document.getElementById(id);


    this.init();
  }

  init() {
    this.ref.addEventListener("click", this.clicked.bind(this));
  }

  clicked() {
    console.log(this.name);
  }
}

let myBtn = new Button('My button', "test");

<button id="test">Click me</button>