Can't get title in the right place

Question

My goal is to mouse over an image and have the title appear under its corresponding image. I have made it so the title will appear, but always on the last image in the list. I have been stuck for hours trying to figure this out and I can't seem to do it. What am I doing wrong?

   function processResponse()
 {
  // if request completed successfully and responseXML is non-null
  if ( asyncRequest.readyState == 4 && asyncRequest.status == 200 && 
     asyncRequest.responseXML )
  {
     clearImages(); // prepare to display a new set of images

     // get the covers from the responseXML
     var covers = asyncRequest.responseXML.getElementsByTagName(
        "cover" );

     // get the title of the covers from the resonseXML
     var titles = asyncRequest.responseXML.getElementsByTagName("title");

     // get base URL for the images
     var baseUrl = asyncRequest.responseXML.getElementsByTagName( 
        "baseurl" ).item( 0 ).firstChild.nodeValue;

     // get the placeholder div element named covers
     var output = document.getElementById( "covers" );

     // create an unordered list to display the images
     var imagesUL = document.createElement( "ul" );

     // place images in unordered list
     for ( var i = 0; i < covers.length; ++i )
     {
        var cover = covers.item( i ); // get a cover from covers array

        // get the image filename
        var image = cover.getElementsByTagName( "image" ).
           item( 0 ).firstChild.nodeValue;

        // get the title of the cover
        var title = cover.getElementsByTagName( "title" ).item( 0 ). firstChild.nodeValue;

        // create li and img element to display the image
        var imageLI = document.createElement( "li" );
        var imageTag = document.createElement( "img" );
        var titleText = document.createElement( "p" );
        var tt = "text"+i;
        var ii = "img"+i;


        // set img element's src attribute
        imageTag.setAttribute( "src", baseUrl + escape( image ) );
        imageTag.setAttribute( "alt", title);
        imageTag.setAttribute( "id", ii);
        titleText.setAttribute( "id", tt);
        imageLI.appendChild(imageTag);
        imageLI.appendChild(titleText);
        imagesUL.appendChild( imageLI ); // place li in ul

        imageTag.addEventListener("mouseover", function() {
            var alt = this.alt;
            titleText.textContent = alt;
        });
        imageTag.addEventListener("mouseleave", function() {
            titleText.textContent = null;
        });
     } // end for statement

Possible duplicate of [addEventListener using for loop and passing values](https://stackoverflow.com/questions/19586137/addeventlistener-using-for-loop-and-passing-values) — maazadeeb, Oct 23 '17 at 06:50
@maazsyedadeeb you were 100% correct. I managed to get it to work. Thank you. — Russell Culpepper, Oct 23 '17 at 07:32

Nick Cordova · Answer 1 · 2017-10-23T07:37:41.630

Try adding the event listener before appending the node

function processResponse()
{
 // if request completed successfully and responseXML is non-null
 if ( asyncRequest.readyState == 4 && asyncRequest.status == 200 && 
 asyncRequest.responseXML )
{
 clearImages(); // prepare to display a new set of images

 // get the covers from the responseXML
 var covers = asyncRequest.responseXML.getElementsByTagName(
    "cover" );

 // get the title of the covers from the resonseXML
 var titles = asyncRequest.responseXML.getElementsByTagName("title");

 // get base URL for the images
 var baseUrl = asyncRequest.responseXML.getElementsByTagName( 
    "baseurl" ).item( 0 ).firstChild.nodeValue;

 // get the placeholder div element named covers
 var output = document.getElementById( "covers" );

 // create an unordered list to display the images
 var imagesUL = document.createElement( "ul" );

 // place images in unordered list
 for ( var i = 0; i < covers.length; ++i )
 {
    var cover = covers.item( i ); // get a cover from covers array

    // get the image filename
    var image = cover.getElementsByTagName( "image" ).
       item( 0 ).firstChild.nodeValue;

    // get the title of the cover
    var title = cover.getElementsByTagName( "title" ).item( 0 ). firstChild.nodeValue;

    // create li and img element to display the image
    var imageLI = document.createElement( "li" );
    var imageTag = document.createElement( "img" );
    var titleText = document.createElement( "p" );
    var tt = "text"+i;
    var ii = "img"+i;


    // set img element's src attribute
    imageTag.setAttribute( "src", baseUrl + escape( image ) );
    imageTag.setAttribute( "alt", title);
    imageTag.setAttribute( "id", ii);
    titleText.setAttribute( "id", tt);

    (function(imageTag,titleText){
         imageTag.addEventListener("mouseover", function() {
            var alt = this.alt;
            titleText.textContent = alt;
         });
        imageTag.addEventListener("mouseleave", function() {
            titleText.textContent = null;
         });         
    }(imageTag,titleText));


    imageLI.appendChild(imageTag);
    imageLI.appendChild(titleText);
    imagesUL.appendChild( imageLI ); // place li in ul

 } // end for statement

That didn't work. I think the person that commented is right about it being about closures. I just can't figure out how to code it out. — Russell Culpepper, Oct 23 '17 at 07:22
Now I'll never know if my updated version would have worked. sigh...lol — Nick Cordova, Oct 23 '17 at 07:39

score 0 · Answer 2 · answered Oct 23 '17 at 07:35

It was because of closures.

Before:

    imageTag.addEventListener("mouseover", function() {
        var alt = this.alt;
        titleText.textContent = alt;
    });
    imageTag.addEventListener("mouseleave", function() {
        titleText.textContent = null;
    });

After:

    imageTag.addEventListener("mouseover", display(titleText, title));
    imageTag.addEventListener("mouseleave", remove(titleText));
    function display(i,j){
        return function() {i.textContent = j;}
    }
    function remove(i){
        return function() {i.textContent = null;}
    }

Can't get title in the right place

2 Answers2