Mysterious Bounding Box After For Loop (Javascript)

Question

I have a for() loop that is meant to set the src, height, and width of elements in a table. I am fairly new to Javascript (about 2-3 weeks, self-taught), but I have coded in Line Scripting Language (LSL) on the game Second Life, so this seems fairly familiar and easy to understand, ..to me.. It's also a combination of my code and others' codes to make this work. The big parts, like reading the "film1.txt" file came from someone and then heavily modified to work for me. Most to all variables have names that I thought of as I went, so it may seem a bit arbitrary, .. or comepletely easy to understand.

Javascript that causes the issue:

    var txtFile = new XMLHttpRequest();
txtFile.open("GET", "film1.txt", true);
txtFile.onreadystatechange = function() {
    if (txtFile.readyState === 4) {  // Makes sure the document is ready to parse.
        if (txtFile.status === 200) {  // Makes sure it's found the file.
            allText = txtFile.responseText; 
            linesParted = allText.split(","); // Will separate each line into an array
            document.getElementById("display").src=linesParted[0];
            document.getElementById("displayText").innerHTML=linesParted[1];

            var dispResize = new Image();
            dispResize.src = linesParted[0];
            dispResize.onload = function() {
                var dispNewHeight = (this.height*(500))/this.width;
                var dispNewWidth = 500;
                document.getElementById("display").style.height = dispNewHeight;
                document.getElementById("display").style.width = dispNewWidth;
            }               

            //
            var imgToDo;
            for(imgToDo = 0; imgToDo < ((linesParted.length)/2); imgToDo++)
            {
                var imgToResize = new Image();
                imgToDoTimes2 = linesParted[imgToDo*2]
                if(imgToDoTimes2 != null) {
                    document.getElementById("img"+imgToDo).style.cursor = "pointer";
                    document.getElementById("img"+imgToDo).src=imgToDoTimes2;
                    imgToResize.src = imgToDoTimes2;
                    imgToResize.onload = function() {
                        var imgResizeNewHeight = (this.height*125)/this.width;
                        document.getElementById("img"+imgToDo).height = imgResizeNewHeight;
                        document.getElementById("img"+imgToDo).width = 125;
                    }
                }
            }
        }
    }
}
txtFile.send(null);

The HTML that's affected by the Javascript

<table border="0" align="center" cellpadding="0" cellspacing="0" id="displayTable">
                    <tr><td colspan="10"><center><div id="displayText"></div></center></td></tr>
                    <tr><td colspan="10" align="center"><img src="" id="display" onClick="scaleDisplay()" ondblclick="dblClick('display')" /></td></tr>
                    <tr><td></td><td colspan="6"><hr /></td><td></td></tr>
                    <tr width="500" id="imgRow">
                        <td></td>
                        <td onclick="fullsize(0)" width="125" ondblclick="dblClick(0)"><img src="" width="125" id="img0"/></td>
                        <td onclick="fullsize(1)" width="125" ondblclick="dblClick(1)"><img src="" width="125" id="img1"/></td>
                        <td onclick="fullsize(2)" width="125" ondblclick="dblClick(2)"><img src="" width="125" id="img2"/></td>
                        <td onclick="fullsize(3)" width="125" ondblclick="dblClick(3)"><img src="" width="125" id="img3"/></td>
                        <td onclick="fullsize(4)" width="125" ondblclick="dblClick(4)"><img src="" width="125" id="img4"/></td>
                        <td onclick="fullsize(5)" width="125" ondblclick="dblClick(5)"><img src="" width="125" id="img5"/></td>
                        <td></td>
                    </tr>
                    <tr width="500" id="imgRow">
                        <td></td>
                        <td onclick="fullsize(6)" width="125" ondblclick="dblClick(6)"><img src="" width="125" id="img6"/></td>
                        <td onclick="fullsize(7)" width="125" ondblclick="dblClick(7)"><img src="" width="125" id="img7"/></td>
                        <td onclick="fullsize(8)" width="125" ondblclick="dblClick(8)"><img src="" width="125" id="img8"/></td>
                        <td onclick="fullsize(9)" width="125" ondblclick="dblClick(9)"><img src="" width="125" id="img9"/></td>
                        <td onclick="fullsize(10)" width="125" ondblclick="dblClick(10)"><img src="" width="125" id="img10"/></td>
                        <td onclick="fullsize(11)" width="125" ondblclick="dblClick(11)"><img src="" width="125" id="img11"/></td>
                        <td></td>
                    </tr>
                    <tr width="500" id="imgRow">
                        <td></td>
                        <td onclick="fullsize(12)" width="125" ondblclick="dblClick(12)"><img src="" width="125" id="img12"/></td>
                        <td onclick="fullsize(13)" width="125" ondblclick="dblClick(13)"><img src="" width="125" id="img13"/></td>
                        <td onclick="fullsize(14)" width="125" ondblclick="dblClick(14)"><img src="" width="125" id="img14"/></td>
                        <td onclick="fullsize(15)" width="125" ondblclick="dblClick(15)"><img src="" width="125" id="img15"/></td>
                        <td onclick="fullsize(16)" width="125" ondblclick="dblClick(16)"><img src="" width="125" id="img16"/></td>
                        <td onclick="fullsize(17)" width="125" ondblclick="dblClick(17)"><img src="" width="125" id="img17"/></td>
                        <td></td>
                    </tr>
                    <tr width="500" id="imgRow">
                        <td></td>
                        <td onclick="fullsize(18)" width="125" ondblclick="dblClick(18)"><img src="" width="125" id="img18"/></td>
                        <td onclick="fullsize(19)" width="125" ondblclick="dblClick(19)"><img src="" width="125" id="img19"/></td>
                        <td onclick="fullsize(20)" width="125" ondblclick="dblClick(20)"><img src="" width="125" id="img20"/></td>
                        <td onclick="fullsize(21)" width="125" ondblclick="dblClick(21)"><img src="" width="125" id="img21"/></td>
                        <td onclick="fullsize(22)" width="125" ondblclick="dblClick(22)"><img src="" width="125" id="img22"/></td>
                        <td onclick="fullsize(23)" width="125" ondblclick="dblClick(23)"><img src="" width="125" id="img23"/></td>
                        <td></td>
                    </tr>
                    <tr><td colspan="6" height="25">&nbsp;</td></tr>
                </table>

Explanation of code: I give it a list of items in an array as supplied from a file on the server called film1.txt (Like a filmstrip type of thing, .. but I changed my mind). It goes like this: "filedir/filename.jpg,File Title,filedir/filename.jpg,File Title,filedir/filename.jpg,File Title". It's .split() into an array which is called from with "linesParted[]". The for() loop does its job by starting at 0 and going until it is no longer < (lineParted.length)/2. It makes a new Image(), makes a variable for the variable tested in the for() loop times 2 in linesParted[], tests in an if() if that new variable is != to null. If not, then it sets an 's style.cursor to "pointer", it sets the src of the , sets the Image()'s src to imgToDoTimes2, then once that loads, it sets the width and then the height with a proportion.

The problem: For some reason, it sets the last that it is allowed to do nothing, as it has no source data from the film1.txt, to null, but it leaves a bounding box sort of thing that appears to be identical to the last image that was not null.

Here is the full version of the code above on the server with the error. Note the note :3 (normally on the top index.html): http://greengoosemarketing.com/so/

Other resource links are located on that page's note.

A word on the site where it's located: The site belongs to my Advanced Animation teacher. The work that is posted on there will mainly be student work. "Minecraft C4D Render" is the only work on there by me. :3

Let me know if there's any other thing I can supply you with.

Answer 1

The problem is rather easy to fix. You are accessing the for index variable from a function that is called after the for loop has finished. So you will always get a value that is equal to the number taken by that index on the last iteration of the for loop.

One way of going about this would be:

imgToResize.imgIndex = imgToDo;
imgToResize.onload = function() {
var imgResizeNewHeight = (this.height*125)/this.width;
    document.getElementById("img" + this.imgIndex).height = imgResizeNewHeight;
    document.getElementById("img"+ this.imgIndex).width = 125;
}

You can also use other ways of access the item after it has been created, but this seems like the easiest way.

You can also assign a predefined ID to the element, and then use that ID in the closure.