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, Dec 12 '10 at 01: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, Dec 12 '10 at 01:35
Wow, getting everyone to do your project for you http://stackoverflow.com/questions/4419537/enhanced-for-loop-in-2d-array-javascript — epascarello, Dec 12 '10 at 01: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, Dec 12 '10 at 03: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, Dec 12 '10 at 03:49
@Ege: There's nothing wrong with `document.write()`, when used appropriately. There's no reason to be disappointed when you see people using it. — Tim Down, Dec 12 '10 at 19:24
@Tim Down, What would be an appropriate usage then? There is none afaik. I would be happy to learn more =) — Ege Özcan, Dec 12 '10 at 22:06
@Ege Özcan: `document.write()` is the simplest and most compatible way to dynamically insert a script or stylesheet, in the latter case avoiding the possibility of a flash of unstyled content. — Tim Down, Dec 13 '10 at 02:33
Selecting the head is easy as there is "document.getElementsByTagName('head')[0]" and in HTML5 it's even easier: document.head. Also as you are inserting text directly, it is not preferable to document.createElement("script") and appending it as a child to head. By the way, if you are inserting css on pageload with js, there should have been a flaw in your logic, most probably. You can do it on the server side when you want it "on page load" and flash of unstyled content won't be a problem if you do it after page load as DOM is already loaded. — Ege Özcan, Dec 13 '10 at 08:45
http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice/802943#802943 - and deferring page load for a script can be very nasty (especially if it lags) (There is this instance where Turkey accidentally blocked google analytics ip adresses and thousands of sites were taking 5 minutes to load - until ga.js times out). you can just unify the js in one file and put it at the bottom of the body... It comes to a matter of practice anyway and I am convinced there may be a few reasonable uses of document.write but it is obvious that there always is a better way. — Ege Özcan, Dec 13 '10 at 10:40
@Ege Özcan: I'm not disagreeing that generally there are better ways to do most things than `document.write`, or that having synchronous script loading can be bad (although this is of course default browser behaviour). I've just mentioned two tasks for which `document.write` is simple and cross-browser compatible, and I'm still not convinced there's a way to avoid the flash-of-unstyled-content problem when dynamically loading a stylesheet without it. — Tim Down, Dec 13 '10 at 16:57

score 2 · Accepted Answer · answered Dec 12 '10 at 01:30

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 '10 at 01:30

scunliffe

57,883
24
118
156

Ege Özcan · Answer 2 · 2010-12-13T10:45:38.990

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 '10 at 10:45

answered Dec 12 '10 at 01:29

Ege Özcan

12,341
2
28
50

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 =) – Ege Özcan Dec 12 '10 at 01:37

score 0 · Answer 3 · answered Dec 12 '10 at 01:34

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

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

3 Answers3

note: