I am trying to make a javascript class that will take an html button, and will execute function from the class when the button is clicked, but I am having a hard time figuring out how to do that.
Here is my code.
class BtnThatDoesStuff {
constructor(selector) {
this.selector = selector;
this.addEventListenerToBtn();
}
yell() {
console.log("Clicked");
}
addEventListenerToBtn() {
let btn = document.querySelector(this.selector);
btn.addEventListener("click", function() {
yell();
})
}
}
new BtnThatDoesStuff(`[rel='button-that-does-stuff']`);
<button class="" rel="button-that-does-stuff">
<span class="">Click Me</span>
</button>
I was expecting to get log hello world but instead I get yell is not defined.