Passing objects to a html element

Question

So I'm creating a card game in js and I'm in the process of making the ui.

I've made the objects of the cards and currently have been able to create a hand. My next step is to display a card in more detail when it's clicked, but nit sure how I would go about this.

For example I have a card, ip001 and that has a name property and an attack property and I need to access these

Answer 1

Post a link to your code. It will clarify much better, where you're at, and how to help you.

Assuming you have a card object something like this:

let ip001 = {name: "card1", attack: 7}

Then you can refer to its properties with dot notation:
ip001.name
ip001.attack

Answer 2

You already have the player hands represented as global arrays. Now you only need one more piece of data: which card in the hand is selected. This would be the index number of the card, or null when nothing is selected. You can pass the card object to your displaying functions, rather than passing individual properties.

Answer 3

I still do not really understand your UI and your game mechanics, at least what you are trying to do with the cards. Currently the card names are printed to console log. But I suppose you want to display all cards on the board (in the HTML code) somehow, maybe as DIV's. I think you should work on this part first. Of course you can add these elements to the DOM when the game is started and the cards are dealt.

https://www.w3schools.com/jsref/met_node_appendchild.asp

Then you can add onclick action to each card, through event listeners. Here you would put a function with the right parameters for the specific card.

https://www.w3schools.com/jsref/met_element_addeventlistener.asp

Throughout the game I guess the player will use the cards, so the hand array will eventually change. I would actually pass the card object as a parameter to your display function.

cardContainer.addEventListener(
"click",
() => { displayCardInfo(thisCard); }
);

Answer 4

Everything that goes tobthe console log was done in order to test that thongs worked properly, such as shuffling the deck and drawing a card, that actually need deleting out of it later.

I have added the cards t the hand and displayed the images in the ui. My next step is to added a bigger version of the card on the right ofbthe screen when the version in the hand is clicked (currently has a n image there)

Here's is a github link qith the card images added if your interested, but I'll have a look at those links yiubsent me.

https://github.com/minus13dbcoding/NoRTCG

Answer 5

Yeaj ibgetvthevwhole card.name idea, but if I'm thinking thisbthrough correctly, I'll be passing a few properties through various onclick events in html.

So what I have sonfar isba hand that is drawn and when yiuvcluck on a card it show an alert confirming uts been clicked (simply for testing).

Next step is to load the image that is clicked on the right ofbthe screen and then after that playbthe card on tonthe feildnifbthe player wants, but ibneed the values of attack,, defense, cost etc between these places and dontvwant them displayed anywhere on screen

https://code.sololearn.com/W92Ugg3lz87M/?ref=app

Answer 6

What would be the best way to pass this on? Assign the value attribute to the index of the card in hand?