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!