Je veux que ma fonction d'écouteur d'événements, isTwoCards, récupère les informations de l'objet qui l'appelle. ce code me donne element.getAttribute n'est pas une fonction

var gameboard = document.getElementById('game-board');
var cards = ['queen', 'queen', 'king', 'king'];
var cardsInPlay = [];

var isTwoCards = function(element){
    cardsInPlay.push(element.getAttribute('data-card'));
    if (cardsInPlay.length === 2){
        isMatch(cardsInPlay);
        cardsInPlay = [];
    }
}
var createBoard = function(){
    for (var i = 0; i < cards.length; i++){
        cardDiv = document.createElement('div');
        cardDiv.setAttribute('class', 'card');
        cardDiv.setAttribute('data-card', cards[i]);
        cardDiv.setAttribute('id', i);
        cardDiv.addEventListener('click', isTwoCards(this));
        gameboard.appendChild(cardDiv);
    }
}
createBoard()
0
Sdarb 9 août 2016 à 18:10

3 réponses

Meilleure réponse

Le problème, comme mentionné précédemment, est que vous exécutez la fonction et pas seulement en la passant comme argument. Jetez un œil à cet exemple:

someDomElement.addEventListener('click', function() { })

Stockons cette fonction dans une variable, puis passons-la en argument.

const myFunction = function() { }
someDomElement.addEventListener('click', myFunction)

Vous voyez, je viens de passer la fonction stockée dans une variable comme argument. Maintenant, vous exécutez la fonction:

const myFunction = function() { }
someDomElement.addEventListener('click', myFunction())

Voilà pourquoi cela ne fonctionne pas.

1
Adrian Wydmanski 9 août 2016 à 15:24

Vous attachez réellement undefined en tant qu'écouteur car il exécute la fonction et sa valeur de retour est undefined.

Vous pouvez résoudre ce problème en créant une fermeture / en renvoyant simplement une nouvelle fonction:

var isTwoCards = function(element){
  return function () {
    cardsInPlay.push(element.getAttribute('data-card'));
    if (cardsInPlay.length === 2){
        isMatch(cardsInPlay);
        cardsInPlay = [];
    }
  };
}

Vous pouvez également accéder simplement à this à l'intérieur de l'écouteur pour accéder à l'élément auquel l'écouteur d'événements est lié:

var isTwoCards = function(){
    var element = this;
    cardsInPlay.push(element.getAttribute('data-card'));
    if (cardsInPlay.length === 2){
        isMatch(cardsInPlay);
        cardsInPlay = [];
    }
}
1
circusbred 9 août 2016 à 15:16

Vous exécutez isTwoCards tout de suite au lieu de l'attribuer comme rappel. D'après ce que je peux voir, ce dont vous avez besoin est d'affecter isTwoCards (et non son résultat!) En tant que rappel - c'est-à-dire cardDiv.addEventListener('click', isTwoCards). Vous devez également utiliser this.getAttribute('data-card') à la place element. this est affecté à l'élément lorsque la fonction est déclenchée en tant que rappel et non lorsque le rappel est attribué.

2
Viktor Molokostov 9 août 2016 à 15:16