Why unable to update html img src with response from ajax call

Question

I have some html that includes a table with some tr rows and each row has a td element containing an img element. Elsewhere on the page I have an ajax method that sends a url to the server, server then saves this locally and returns the location back.

I then try to update the src attribute element for each img element with the new url, bu nothing is updated. My debugging alert calls shows that the image elements are found and the correct location is returned, at a loss to know what Im doing wrong.

Html

  <table class="edittable" id="ARTWORK_TABLE">
    <tr>
        <th class="tableheading verysmallinputfield" style="position:relative">
            <label>
                #
            </label>
        </th>
        <th class="tableheading verysmallinputfield" style="position:relative">
            <label>
                Replace
            </label>
        </th>
        <th class="tableheading verylargeinputfield" style="position:relative">
            <label>
                Filename
            </label>
        </th>
        <th class="tableheading mediuminputfield" style="position:relative">
            <label>
                Artwork
            </label>
        </th>
    </tr>
    <tr id="menu_artwork1">
        <td class="tableheading">
            0
        </td>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <label>
                E:\Music\Tango in the Night\02 - Seven Wooooooonders.WAV
            </label>
        </td>
        <td>
            <img src="images/51sjc9qpk4oqFYZdroM04w==_thumbnail.jpg" width="32px" height="32px" title="600 x 585">
            <label>
                600 x 585
            </label>
        </td>
    </tr>
    <tr id="menu_artwork2">
        <td class="tableheading">
            1
        </td>
        <td>
            <input type="checkbox">
        </td>
        <td>
            <label>
                E:\Music\Tango in the Night\03 - Everywhere.WAV
            </label>
        </td>
        <td>
            <img src="images/51sjc9qpk4oqFYZdroM04w==_thumbnail.jpg" width="32px" height="32px" title="600 x 585">
            <label>
                600 x 585
            </label>
        </td>
    </tr>
.........

Javascript Ajax function

function sendFormData(urls)
{
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/editsongs.update_artwork', false);
    xhr.setRequestHeader("Content-type", "text/plain");
    xhr.send(urls[0]);
    var images = document.getElementById("ARTWORK_TABLE").getElementsByTagName("img");
    alert("Found img"+images.length);
    for(image in images)
    {
        alert(xhr.responseText);
        image.src = xhr.responseText;
    }
}

Answer 1

Try changing

image.src = xhr.responseText;

to

images[image].src = xhr.responseText;

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in for more details

Answer 2

Try to console.log the images collection and then each image in your for...in loop.

You can also console.log(typeof images) to find out that it is actually an object and that explains the unexpected values you find in each image of your for...in loop.

Since this is the case, you could use a normal for loop:

for (var i = 0; i < images.length; i++) {
  console.log(images[i]);
}

Answer 3

If you want to keep the for ... in syntax, you will need to refer to the property image (each img element) on your HTML collection of img elements:

for (var image in images) {
    images[image].src = xhr.responseText;
}