Am trying to write using document.write() an image at the time from my array. However it does not display any...

// *** Temporal variables
    var i = 0;
    var j = 0;
    var x = 0;

    // Create basic linear array
    var ImgArray = []

    // Do the 2D array for each or the linear array slots
    for (i=0; i < 4 ; i++) {
        ImgArray[i] = []
    }

    // Load the images
    x = 0;
    for(i=0; i < 4 ; i++) { 
        for(j=0; j < 4 ; j++) { 
          ImgArray[i][j] = new Image();
          ImgArray[i][j] = "Images/" + x + ".jpg";
          document.write("<img id= " + x + " img src=ImgArray[i][j]  width='120'   height='120'/>");
          x = x + 1;
        }
        document.write("<br>");
    }

What am I doing wrong?

Am trying to write using document.write() an image at the time from my array. However it does not display any...

// *** Temporal variables
    var i = 0;
    var j = 0;
    var x = 0;

    // Create basic linear array
    var ImgArray = []

    // Do the 2D array for each or the linear array slots
    for (i=0; i < 4 ; i++) {
        ImgArray[i] = []
    }

    // Load the images
    x = 0;
    for(i=0; i < 4 ; i++) { 
        for(j=0; j < 4 ; j++) { 
          ImgArray[i][j] = new Image();
          ImgArray[i][j] = "Images/" + x + ".jpg";
          document.write("<img id= " + x + " img src=ImgArray[i][j]  width='120'   height='120'/>");
          x = x + 1;
        }
        document.write("<br>");
    }

What am I doing wrong?

• javascript
• html
• multidimensional-array
• image-manipulation

• If you would inspect the page with Firebug, you would see the problem. – epascarello Commented Dec 12, 2010 at 1:35
• By the way, I really am disappointed by so many people trying to utilize "document.write" which hasn't got any practical use. This is like trying to parse HTML with regEx. It hurts my eyes. Please don't take it personal; just a general thought. – Ege Özcan Commented Dec 12, 2010 at 1:35
• 1 Wow, getting everyone to do your project for you stackoverflow./questions/4419537/… – epascarello Commented Dec 12, 2010 at 1:39
• @epascarello, is a fair point... now lets look at the other side of the picture, a university semester lasts 3 months here in UK. Check my questions and see if ANY (apart from today's 2) are about JavaScript. That leads me to 2 points; a) since when is it a problem to ask 2 field related questions on the same day. b) wouldn't you say that if i would be doing JS for 3 months in university i would had probably asked more questions along this period to get people doing my work... yet that's not the case... – Carlos Commented Dec 12, 2010 at 3:42
• ... i really get annoyed by people that do assumptions without knowing the actual situation. Am self-learning JavaScript, and I have never asked in SO for quick code. I also think you should consider the context of both questions. Here SO did my "work" by telling me " was the mistake. And in the question earlier SO did the other part of my "work" by telling me in JS 2D arrays dont really exist???? Like you said WoW... if to be an actual coursework all that acounts 95% of it.... I gave this explanation not for you but to clarify and for respect to other SO's. – Carlos Commented Dec 12, 2010 at 3:49

3 Answers 3

Looks like your JavaScript isn't quite right...

document.write('<img id="' + x + '" src="' + ImgArray[i][j] + '" width="120" height="120"/>');

It looks like you're trying to do image preloading by using new Image(), but then you immediately write out an image element with the same src using document.write(), so the image will not have preloaded and you get no benefit. I also suspect you're missing a .src on one line in the inner loop:

ImgArray[i][j].src = "Images/" + x + ".jpg";

This looping to create image elements would be best done server-side when generating the HTML, but assuming that's not an option, you could lose the ImgArray variable pletely:

x = 0;
for(i=0; i < 4; i++) { 
    for(j=0; j < 4; j++) { 
        document.write("<img id='" + x + "' src='Images/" + x + ".jpg' width='120' height='120'>");
        x = x + 1;
    }
    document.write("<br>");
}

document.write writes any input the the location of script element. Try this instead:

in body

<div id="imageContainer"></div>

in your script, gather all output to a variable, say contentVariable, and then

document.getElementById("imageContainer").innerHTML = contentVariable;

note:

It's bad practice to use document.write and even innertml for appending elements to dom. use document.createElement and element.appendChild for dom manupilation.