Question

I’m trying to place images from a div to a span. The result is that the images overlap and I don’t know how to position each image as it is added.

This is my code:

The CSS

<style type="text/css">
        body{background-image:url('image/wood.jpg');}
        h1, h3, h4, h5, h6, p{text-align:center; font-family:helvetica; font-weight:900;}
        h3, h4, h5 {color:red;}
        h1, h6, p{color:white;}
        img{height:120px;}
        span{display:inline-block; margin-left: 25px; height:250px;}
        div.inv{background-image:url('image/shelf.jpg'); background-position:fixed; 
            background-repeat:none;}
        span#la, span#me, span#sm{margin-left:auto; margin-right:auto; width:800px;}
        div{background-image:url('image/crate.jpg'); margin-left:25px; 
            margin-right:25px;}

The Javascript

var temp = null;
        var largeArray = new Array(6);
function isTemp()
        {
            if(temp == null)
            {
                alert("Please pick an item to place in the container");
            }               
        }

function fillLarge()
        {
            isTemp();
            if(largeArray[0] != undefined &&largeArray[1] != undefined &&largeArray[2] != undefined && largeArray[3] != undefined &&largeArray[4] != undefined &&largeArray[5] != undefined)
            {
                alert('This crate is full');
            }
            else
            {
                for (var i=0; i<6; i++)
                {
                    if (largeArray[i] == undefined)
                    {
                        largeArray[i] = "<img src='image/"+temp+".jpg'/>";
                        document.getElementById("la").innerHTML = largeArray[i];
                        break;
                    }
                }
                document.getElementById(temp).style.display="none";
                temp = null;
            }
        }

---

the HTML

<div>
    <h3> LARGE CONTAINER </h3>
    <span id="la" onclick="fillLarge();"> 
    </span> </div>
<span id = "gold" onclick = "temp = this.id;">
                <img src="image/gold.jpg"/>
                <p> Gold that you didn't farm </p>
            </span>
            <span id = "Moarg" onclick = "temp = this.id;">
                <img src="image/Moarg.jpg" />
                <p> Mo'arg Slave for <br /> your engineering needs </p>
            </span>
            <span id = "sweetroll" onclick = "temp = this.id;">
                <img src="image/sweetroll.jpg" />
                <p> Sweetroll stolen from a citizen </p>
            </span>
            <span id = "uranium" onclick = "temp = this.id;">
                <img src="image/uranium.jpg" />
                <p> Uranium Ore </p>
            </span>

I don’t know how to use jQuery, or anything pass the basic javascript.

Answer 1

Your problem is in your javascript…

After you add each image you are overriding your inner HTML instead of appending the new image.

Change…

document.getElementById("la").innerHTML = largeArray[i];

To…

document.getElementById("la").innerHTML += largeArray[i];

(Notice the “+=” to append the new html)