Why The For Loop Is Not Working?

[tinfanide]

<script>var img = [];img[img.length] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png",	    cap: "Google",	    url: "http://www.google.co.uk/",	    des: "Google is the best search engine!",	    };	   img[img.length] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png",		  cap: "Youtube",	    url: "http://www.youtube.com/",	    des: "Youtube is the best video platform! <br /> preset to be held 5 sec before faded out",	    };	   img[img.length] = {src: "http://www.techlifeweb.com/facebook_logo.jpg",	    cap: "Facebook",	    url: "http://www.facebook.com/",	    des: "Facebook is the best social network site!",		  };img[img.length] = {src: "http://scm-l3.technorati.com/10/05/10/12671/twitter-logo-5.jpg",	    cap: "Twitter",	    url: "http://twitter.com/",	    des: "Twitter is the best social network site!",		  };	   img[img.length] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg",	    cap: "Adobe",	    url: "http://www.adobe.com/",	    des: "Adobe is the best multimedia creation software collection!",		  };	   img[img.length] = {src: "http://www.easyquestion.net/learninginadigitalworld/wp-content/uploads/2009/06/ms-office-logo.jpg",	    cap: "MS Office",	    url: "http://office.microsoft.com/en-gb/",	    des: "MS Office is the best office software collection! <br /> preset to be held 5 sec before faded out",		  };function init(){var slider = document.createElement("div");document.body.appendChild(slider);var slide = document.createElement("div");for(var i=0; i<img.length; i++)slide.innerHTML = "<img src="+img[i].src+" />";slider.appendChild(slide);}window.onload = init;</script>

It only shows the last array picture. Why?

[Ingolme]

You've only created one single element to append to the slider element. You have to call the createElement() once for each element that you want to add to the document.

[Ingolme]

You've only created one single element to append to the slider element. You have to call the createElement() one for each element that you want to add to the document.

[tinfanide]

so I have to copy these codes for each element?

var slide = document.createElement("div");for(var i=0; i<img.length; i++)slide.innerHTML = "<img src="+img[i].src+" />";slider.appendChild(slide);

[ShadowMage]

No, but the solution depends on what your goal is. Do you want to create a 'slide' div for each image, and add each 'slide' div to the slider?You need to move the createElement line inside the loop:

for(var i=0; i<img.length; i++) {   var slide = document.createElement('div');   ...}

or Do you want to add each image to the 'slide' div, then add the 'slide' div to the slider?Just add a '+' to the line that assigns the img to the innerHTML, like so:

slide.innerHTML += "<img src='"+img[i].src+"' />";

(I also added single quotes around the src attribute.) EDIT: Just realized that you are appending the 'slide' div inside the loop, so what you most likely want is the first solution.

[tinfanide]

function init(){var slider = document.createElement("div");document.body.appendChild(slider); for(var i=0; i<img.length; i++){  var slide = document.createElement("div");  slide.innerHTML = "<img src="+img[i].src+" />";  slider.appendChild(slide);  } }

This bit doesn't work in IE9 (just in FF5). But IE Developer Tool.

function init(){var slider = document.createElement("div");document.body.appendChild(slider); var slide = document.createElement("div");for(var i=0; i<img.length; i++)slide.innerHTML += "<img src='"+img[i].src+"' />";slider.appendChild(slide); }

This one works for both. Finally the code that works for both would be like this:

function init(){var slider = document.createElement("div");document.body.appendChild(slider);for(var i=0; i<img.length; i++){  var slide = document.createElement("div");  slide.innerHTML += "<img src='"+img[i].src+"' />";  slider.appendChild(slide);  }}