2016-08-09 192 views
0

Ich möchte meine Event-Listener-Funktion, isTwoCards, um Informationen aus dem Objekt zu holen, die es aufruft. Dieser Code gibt mir element.getAttribute ist keine FunktionJavaScript-Funktion DOM-Event-Listener mit "dieser"

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

'cardDiv.addEventListener ('klicken', isTwoCards);' dann in 'isTwoCards()' tun: 'cardsInPlay.push (this.getAttribute ('Datenkarte'));' –

+0

Sie müssen nicht Übergeben Sie dies als Argument (was auch nicht funktioniert). Ersetze 'isTwoCards (this) 'mit' isTwoCards' und 'element.getAttribute (' data-card ')' mit 'this.getAttribute (' data-card ')' – evolutionxbox

+0

'addEventListener (' click ', isTwoCards (this)) '<--- Dies ruft die' isTwoCards'-Funktion auf und fügt sie nicht als Listener hinzu. – evolutionxbox

Antwort

1

Das Problem wie bereits erwähnt ist, dass Sie die Funktion ausführen und nicht nur als Argument übergeben. Sehen Sie sich dieses Beispiel an:

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

Speichern Sie diese Funktion in einer Variablen und geben Sie sie als Argument weiter.

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

Sehen Sie, ich habe gerade die Funktion in einer Variablen als Argument übergeben. Nun, was Sie tun, ist die Ausführung der Funktion:

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

Deshalb ist es nicht funktioniert.

1

Du Anbringen undefined als Zuhörer tatsächlich, weil sie die Funktion und deren Rückgabewert ausführt undefined.

Sie können dieses Problem beheben, indem ein Verschluss zu schaffen/einfach eine neue Funktion Rückkehr:

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

Sie können auch einfach this im Inneren des Hörers Zugriff auf das Element zuzugreifen, dass die Ereignis-Listener gebunden ist:

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

Diese Antwort behebt das Problem nicht beim Aufruf einer Funktion, anstatt sie als Listener hinzuzufügen. 'cardDiv.addEventListener ('click', isTwoCards (this));' – evolutionxbox

+1

Das ist nur ein Problem, wenn 'isTwoCards' keine Funktion zurückgibt. – circusbred

+0

Das ist sehr wahr. – evolutionxbox

2

Sie isTwoCards sofort ausführen, anstatt es als Rückruf zuzuweisen. Von was ich sehen kann, was Sie brauchen, ist isTwoCards (und nicht sein Ergebnis!) Als Rückruf zuweisen - d. H. cardDiv.addEventListener('click', isTwoCards). Sie sollten auch this.getAttribute('data-card') statt element verwenden. this wird dem Element zugewiesen, wenn die Funktion als Callback ausgelöst wird und nicht wenn der Callback zugewiesen ist.