title: Trouble styling a DIV with two background images using Javascript Objects
body: <p>I can only get the <strong>CSS</strong> styled image to load. The browser does not display <code>imgB</code>. The source code also only shows <code>imgA</code>. I just want to call the backgroundImage value of the Object at the time of the specific loop
  My <code>HTML</code>.</p>
  
  <pre><code>&lt;div onclick="displayCards()"&gt;Display Cards&lt;/div&gt;
  </code></pre>
  
  <p>My <strong>Javascript Objects</strong> contain <strong>properties</strong> for these <code>DIV</code> <strong>elements</strong>. The different cards each have a unique image <code>imgB</code>. I created an <strong>array</strong> for the <strong>Objects</strong> so I can loop through them with a <code>for</code> <strong>loop</strong>.</p>
  
  <pre><code>var card_troop = { title : "troop" , type : "Unit" , image : "url(troop.png)" } ;
  var card_base = { title : "base" , type : "Structure" , image : "url(base.png)" } ;
  var card_wood = { title : "wood" , type : "Resource" , image : "url(wood.png)" } ;
  
  var list = [
     card_troop ,
     card_base ,
     card_wood
     ] ;
  </code></pre>
  
  <p>The <code>DIV</code> <strong>elements</strong> are created by my <code>displayCards()</code> <strong>function</strong>, that are appended to the <code>body</code> of my <code>HTML</code> document.</p>
  
  <pre><code>function displayCards()
  {
     card = document.createElement("div") ;
        var card_id = document.createAttribute("id") ;
        card_id.value = list[x].title ;
        card.setAttributeNode(card_id) ;
        var card_class = document.createAttribute("class") ;
  
           switch (list[x].type) // Card Theme Comparison
              {
              case "Unit" :
                 card_class.value = "unit" ;
                 break ;
              case "Structure" :
                 card_class.value = "structure" ;
                 break ;
              case "Resource" :
                card_class.value = "resource" ;
                break ;
              }
           card.setAttributeNode(card_class) ;
  
     var imgA = card.style.backgroundImage ;
     var imgB = list[x].image ;
     card.style.backgroundImage = imgA + " , " + imgB ;
  }
  </code></pre>
  
  <p>Using the <code>switch</code> <strong>Comparison</strong>, <code>switch (list[x].type)</code>, defined by the <strong>Object Property</strong> <code>type:</code>, each <code>DIV</code> will have one of three <strong>CSS</strong> <code>backgroundImage</code> <strong>values</strong>.</p>
  
  <pre><code>div.unit { background-image:url( theme_unit.png ) ; }
  div.structure { background-image:url( theme_structure.png ) ; } 
  div.resource { background-image:url( theme_resource.png) ; } 
  </code></pre>
  
  <p>Another <strong>function</strong> <code>builder()</code> calls <code>displayCards()</code> and appends the <strong>Object</strong> <code>card</code>.</p>
  
  <pre><code>function builder()
  {
  for ( x = 0 ; x &lt; 9 ; x++ )
     {
     displayCards() ;
     document.body.appendChild(card) ;
     }
  }
  </code></pre>
  
  <p>I believe my problem lies here. Since the <code>DIV</code> is still not appended.
  To note:<code>imgA</code> is a higher index than <code>imgB</code> and has transparency to allow <code>imgB</code> to be seen.</p>
  
  <pre><code>   var imgA = card.style.backgroundImage ;
     var imgB = list[x].image ;
     card.style.backgroundImage = imgA + " , " + imgB ;
  </code></pre>
  
  <p>I am a minimalist coder and this is the shortest I could come up with. I do not want to have to repeat <strong>URL's</strong> more than once. My list of Objects is going to get much longer than three.
  <strong>NO JQUERY</strong></p>