Need help understanding relationship between DOM elements & Objects created in a class

Question

class Button {
    constructor(name) {
        this.target = 'bullseye';
        this.name = name;
        this.element = this.create();
    }
    create() {
        var button_html = '<div>'+this.name+'</div>';
        var button_element = $(button_html);
        button_element[0].addEventListener('click', function(e) {
            Button.yell('??????');
            //Should be buttonA, or buttonB depending on which one was clicked. I have tried, (this) & (e), but to no success.
        }); 
        $('body').append(button_element);
        return button_element;
    }

    static yell(element){
        alert('You have hit the '+element.target);
    }


}

let buttonA = new Button('Button A');
let buttonB = new Button('Button B');

https://jsfiddle.net/x4dsgp5b/1/

I feel I'm misunderstanding some very basic stuff here. What is the proper syntax/logic to place a [clickable] button onto the body from a Class, and interact with buttonA or buttonB (depending on which was clicked).

Answer 1

I'm sure there is a more elegant solution, but this one works.

 class Button { constructor(name) { this.target = 'bullseye'; this.name = name; this.element = this.create(); } create() { var buttone = document.createElement("div"); buttone.innerHTML = this.name; document.body.appendChild(buttone); let _name = this.name; buttone.addEventListener('click', function(e) { Button.yell(_name); }); return buttone; } static yell(element){ alert('You have hit the '+element); } } let buttonA = new Button('Button A'); let buttonB = new Button('Button B');

Answer 2

You can use only the name and use the this property to get the current button.
Then in the click handler you know by name which button has been clicked.

Something like here:

 class Button { constructor(name) { this.name = name; this.element = this.create(); } create() { const element = document.createElement("button"); element.innerHTML = `<div>${this.name}</div>`; element.addEventListener('click', this.yell.bind(this)) document.body.appendChild(element); return element; } yell() { alert('You have hit the '+this.name); } } const buttonA = new Button('Button A'); const buttonB = new Button('Button B');

Some notes:

• I have used the new ES6 synax (no var or let when not needed)
• I didn't use jquery (the example was simple to be done in pure JavaScript)
• I used this.yell as direct handler for click, in order to have the good this I have to bind it
• I need the this property in yell function in order to know the name, that's why I removed the static keyword.

Answer 3

This should work. You already have a function (Button.yell) that accepts the element.

button_element[0].addEventListener('click', Button.yell); 

Answer 4

My understanding of this is that you want the alert to say the word 'Button A' or 'Button B'.

button_element[0].addEventListener(
     'click', 
     (e) => Button.yell(this.name)
);

Note that I used the arrow function syntax ( => ) rather than the funtion syntax. The reason for this is that, if you use the function syntax, the this value will be different within the handler function.