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/

J'ai l'impression de mal comprendre certaines choses très basiques ici. Quelle est la syntaxe / logique appropriée pour placer un bouton [cliquable] sur le corps d'une classe et interagir avec buttonA ou buttonB (selon celui sur lequel l'utilisateur a cliqué).

1
541justus 4 juin 2020 à 01:17

4 réponses

Meilleure réponse

Vous ne pouvez utiliser que le nom et utiliser la propriété this pour obtenir le bouton actuel.
Ensuite, dans le gestionnaire de clics, vous savez par nom quel bouton a été cliqué.

Quelque chose comme ici:

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');

Quelques notes:

  • J'ai utilisé la nouvelle synaxe ES6 (pas de var ou let quand ce n'est pas nécessaire)
  • Je n'ai pas utilisé jquery (l'exemple était simple à faire en JavaScript pur)
  • J'ai utilisé this.yell comme gestionnaire direct pour le clic, afin d'avoir le bon this je dois le lier
  • J'ai besoin de la propriété this dans la fonction hurler pour connaître le nom, c'est pourquoi j'ai supprimé le mot-clé static.
1
V. Sambor 3 juin 2020 à 22:39

Je suis sûr qu'il existe une solution plus élégante, mais celle-ci fonctionne.

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');
       
1
imvain2 3 juin 2020 à 22:22

Je crois comprendre que vous voulez que l'alerte prononce le mot «Bouton A» ou «Bouton B».

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

Notez que j'ai utilisé la syntaxe de la fonction de flèche (=>) plutôt que la syntaxe de la fonction. La raison en est que, si vous utilisez la syntaxe de la fonction, la valeur this sera différente dans la fonction de gestionnaire.

0
Andrew Shepherd 3 juin 2020 à 22:32

Cela devrait fonctionner! Vous disposez déjà d'une fonction (Button.yell) qui accepte l'élément.

button_element[0].addEventListener('click', Button.yell); 
0
Zabeeh Ullah Babar 3 juin 2020 à 22:25