Problem with "document.write()" an Image Array in JavaScript

Question

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?

If you would inspect the page with Firebug, you would see the problem. — epascarello
– 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
– Ege Özcan, Commented Dec 12, 2010 at 1:35
Wow, getting everyone to do your project for you stackoverflow.com/questions/4419537/… — epascarello
– 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
– 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
– Carlos, Commented Dec 12, 2010 at 3:49

scunliffe · Accepted Answer · 2010-12-12 01:30:07Z

2

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

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

answered Dec 12, 2010 at 1:30

scunliffe

63.8k26 gold badges132 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tim Down · Accepted Answer · 2010-12-12 01:34:19Z

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 completely:

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>");
}

Ege Özcan · Accepted Answer · 2010-12-13 10:45:38Z

0

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.

edited Dec 13, 2010 at 10:45

answered Dec 12, 2010 at 1:29

Ege Özcan

14.3k2 gold badges33 silver badges53 bronze badges

1 Comment

Ege Özcan Over a year ago

yeah, I just get dizzy when I see "document.write" and not read the rest of the code. just merge this with scunliffe's fix and code happily ever after =)

Collectives™ on Stack Overflow

Problem with "document.write()" an Image Array in JavaScript

3 Answers 3

Comments

Comments

note:

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

note:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related