CODEWITHSUNDEEP
javascript
Kingisback
Kingisback

Reputation: 155

How to display images using a function?

I want to display some images (*.jpg) which I've stored in a folder. I want to display these images using a function. To do this I've created an array which consists of objects, and each object contains an id which I'm using in the function. Here's the code: 

//employee array
var employees =[{
    name:"jacob",
    age :23,
    city:"Boston",
    yoe :12,
    image :'d.jpg',
    id : 1
    },
    {
    name:"aaron",
    age :21,
    city:"Nevada",
    yoe :12,
    image :'b.jpg',
    id : 2
    },
    ...   
}];

I'm using the employee id - which is the name of the image - to display the images. Below is the function for the images:

function getimages(){
    for(var i = 1;i <= employees.length;i++){
        document.getElementById("list + i").innerHTML = employees[i].id+".jpg";
    }
}
getimages(); // to get the images

This is the HTML part where I want to show these images:

<ul>
    <li id="list1">A</li>
    <li id="list2">B</li>
    <li id="list3">C</li>
    <p>123213</p>
</ul>

Upvotes: 0

Views: 176

Answers (3)

strakez
strakez

Reputation: 35

If the number of employees varies, then you may want to make the number of list elements variable. You can do this by creating an empty unordered list <ul id="employees"></ul> and then altering the getImages function:

function getImages(){ 
    for(var i = 1, img, li; i <= employees.length; i++) { 

        // create image and set image source
        img = document.createElement("img"); img.src = employee[i].image; 

        // create list item, set ID and attach previously created image
        li = document.createElement("li"); li.id = "list"+i; li.appendChild(img); 

        // attach list item to unordered list of employees
        document.getElementById("employees").appendChild(li);
    }
}

Now you can have as many employees as you like, and they will all have their own list ID. I also changed the variable declaration in the for loop, so that the variables are reused, rather than re-declared on each iteration.

Upvotes: 0

Frederik.L
Frederik.L

Reputation: 5610

You will need to replace document.getElementById("list + i") with document.getElementById("list" + i).

Then sometimes, it may be worth dynamically creating DOM elements and appending them as you never know when you will need to update those new elements. You may have something like this:

function getimages(){
        for(var i = 1;i <= employees.length;i++) {
             var elem=document.getElementById("list"+i);
             var imagePath=employees[i].id+".jpg";

             // append text
             elem.appendChild( document.createTextNode(imagePath) );

             // append image
             var img = document.createElement("img");
             img.src = imagePath;
             elem.appendChild(img);
        }
}

Upvotes: 2

TryingToImprove
TryingToImprove

Reputation: 7407

To display a image in the getImage-function, you can simple write a <img>-tag

document.getElementById("list" + i).innerHTML = '<img src="' +  employees[i].id + '.jpg" />';

or you can do it as @Frederik suggest, but that requires you write 'core' javascript.

Upvotes: 0

Related Questions