Showing class property value on click

user_18978752 0
Viewed 28

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>

javascript-objects this html javascript
1 Answers

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>

user_143268990
Related