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>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>