Trouble linking JS objects to HTML div

Question

I have a group of JS objects which represent individual cards in a deck. I have an HTML file with div classes for each card. I am just not sure what I need to type into the div class to link it with an object.

Here is an example of one object:

threeOfClubs= {
    name : '3 of Clubs',
    suit : 'Club',
    value : 3,
    image : '3C.png'
}

I want my div class to link to this object so I can display the png on a webpage. Here is how the div classes look.

HTML

<div class="card">

</div>

Answer 1

What you'd do is this:

var card = document.getElementsByClassName("card")[0];
card.style.background-image = threeOfClubs.image;

This sets the CSS backgruond-image property to the property image in the threeOfClubs object.