0

so I'm working on creating a Javascript version of the card game Dominion.

I have this function that takes in an array that hold my card objects I created with some custom objects. One object for each card. I create the container that holds each card (a div), I then create an image object, then a button that the user clicks to play a card (if it's an action card).

This is where I start having my problem. I add on onclick function to the button. I want to pass the card object (so I can send it to my discard array when they play it) and I want to send the parent of the button (which should be the div that holds the specific card) to my playAction() function (so basically my onclick function just calls another function). I'm getting an error that playCard[i] is undefined. I also tried to define it outside of the onclick function with no luck.

You can view a live version of where I'm at here: http://people.rit.edu/lxl1500/Prog4/Project%202/project1.html

Javascript: http://people.rit.edu/lxl1500/Prog4/Project%202/main-script.js

So you click on the + button on a card to buy it and eventually it will show up in your hand. The error occurs when you click the play button on an action card.

displayCard Function:

function displayHand(hand){

var parent = Array();
var container = Array();
var card = Array(); 
var playCard = Array();

for(var i=0; i < hand.length; i++){


    container[i] = document.createElement('div');
    container[i].setAttribute('class','singleHandCard');
    var cardIndex = container[i].setAttribute('id', 'card'+i);
    document.getElementById('game-hand').appendChild(container[i]);

    //create each card in our hand

    card[i] = new Image();
    card[i].src = hand[i].image;

    //create play card item

    playCard[i] = new Image();
    playCard[i].setAttribute('class', 'playbtn')
    playCard[i].src = 'images/play-btn.png';
    playCard[i].style.visibility = 'hidden';
    if(hand[i].type == "action"){
        playCard[i].style.visibility = 'visible';
    }
    container[i].appendChild(playCard[i]);



    parent[i] = card[i].parentNode;

    playCard[i].addEventListener('click', function() {

        playAction(playCard[i],parent[i]);

    }.bind(hand[i]), false);

    container[i].appendChild(card[i]);
  }

}

playAction function:

function playAction(actionCard,parent){
    discard.push(actionCard);
    parent.innerHTML='';
}

Any help would be GREATLY appreciated. I've been trying to work this out for a couple of days now and I'm totally stumped. Thanks!

4

1 回答 1

0

You're problem is that you're referencing an index variable (i) inside of the click handler. In the event listener callback i is still referencing the i from the loop that it was declared in. So it'll always be the last value i had, which is 4. This is why you can play an action card as long as it's the last card in your hand.

playCard[i].addEventListener('click', function() {

    playAction(playCard[i],parent[i]);
    console.log(i); //Always 4

}.bind(hand[i]), false);

One solution is put the event listener call into another function that takes the variables as an argument:

function cardClick(playCard, parent, hand) {
    playCard.addEventListener('click', function() {

        playAction(playCard,parent);

    }.bind(hand), false);
}

And then just call that in your loop:

cardClick(playCard[i], parent[i], hand[i]);
于 2013-02-13T04:53:47.853 回答