Home/ Questions/Q 9248297
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T09:54:51+00:00

EDIT : Here’s another problem: I can’t define each picture’s Z-index with the for

  • 0

EDIT : Here’s another problem: I can’t define each picture’s Z-index with the for loop.

function placeImage(x) {
    var div = document.getElementById("div_picture_right");

    div.innerHTML = ""; // clear images

    for (counter = 1; counter <= x; counter++ ) {
        var image = document.createElement("img");
        image.src = "borboleta/Borboleta" + counter + ".png";
        image.width = "195";
        image.height = "390";
        image.alt = "borboleta" + counter;
        image.id = "imagem" + counter;
        image.position = "relative";
        image.style.zIndex = counter;
        div.appendChild(image);
    }
};

window.onload = function () {
    placeImage(20);
};

<body>
    <div id="div_wrapper">
        <div id="div_header">
            <h1>First Project</h1>
        </div>
        <div id="div_picture">
            <div id="div_picture_left"></div>
            <div id="div_picture_right"></div>
        </div>
    </div>
</body>

When checking FireBug, I get this:

Error: image corrupt or truncated

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Looks like your code is executing before the div exists on the page. You shouldn’t try to get a handle on an element in the DOM until it is fully loaded. You can define your function outside of window.onload, but keep your call within window.onload, example:

    function placeImage(x)
{
    var div = document.getElementById("div_picture_right");

    div.innerHTML = ""; // clear images

    for (counter=1;counter<=x;counter++) {
        var imagem=document.createElement("img");
        imagem.src="borboleta/Borboleta"+counter+".png";
        div.appendChild(imagem);
    }
}

window.onload = function() {
    placeImage(48);
};

    I also added a small improvement which is to get the handle on the div and store in a variable once, instead of getting a new handle on each iteration.

    • 0