JS AddEventListener Problems

Question

My goal here is to take an example from my book that displays different book covers upon button presses. The new part I need to add is to add an event listener that displays the title of the book when you hover over an image.

Note** I am using the title attribute to achieve showing the title when hovering, but I have to have the title text display under the book that has been hovered over

Why won't this work?

         document.addEventListener("mouseover", function(){
document.getElementById("image").innerHTML = title;
});

I've included a link to my website as that would be easier than pasting all of the code. I am very new to using the DOM and AJAX in general. I'm not looking for any answers, just some help on understanding what I may be doing wrong.

http://ualr.edu/gawalker1/16%20CH%20HW/PullImagesOntoPage.html

I almost have an answer for you , but I realize I don't fully understand what you want to do. What `innerHTML` are you trying to change, in plain English? There is no element with the ID `image` so I'm at a bit of loss what the high-level intention of this code is supposed to be. Do you just need a title-displaying `
` or sometihng, and you simply haven't added it to the page yet? — apsillers, Apr 25 '17 at 15:51

score 3 · Answer 1 · answered Apr 25 '17 at 15:54

What you're trying to do, I think, is event delegation. In order to do that, you have the right idea to listen on the parent element, like

document.addEventListener("mouseover", function(e){ ... });

(You must capture the event object, passed in as the first argument of the event listener function, which I've named e here.)

What you want to do is look at e.target, which is the element within document currently targeted by the mouseover event, and use its title property.

document.addEventListener("moveover", function(e) {
    if(e.target && e.target.nodeName == "IMG") {
        document.getElementById("image").innerHTML = e.target.title;
    }
});

This will check the mouse has entered an <img> element, and if so, it will set innerHTML of the element with id="image" (which is currently missing from your page, but I assume you'll add it, or chose another ID that does exist on the page).

If you later have other images you don't want this behavior to apply to, you can either choose a more selective parent than the whole document, or add more conditions to the filtering if condition, like ... && e.target.class == "hover-target" to limit the behavior to images with a particular class.

score 0 · Answer 2 · edited May 23 '17 at 11:54

apsillers answer is a great answer but I am assuming you were trying to target the image element with document.getElementById('image') and append a title to it. Also, my implementation uses the mouseover event only for image elements.

var images = document.getElementsByTagName('img');          // gets all images nodes and stores in an array
for (var i = 0, len = images.length; i < len; i++) {        // loops through images array
  images[i].addEventListener("mouseover", function() {      // adds mouseover event to all image nodes
    if (!this.hasTitle) {                                   // checks if the image has a title (property that I have added)
      var div = document.createElement("div");              // create new div element
      var titleNode = document.createTextNode(this.title);  // create text node with title of the image being hovered
      div.appendChild(titleNode);                           // append text node to div element
      insertAfter(div, this);                               // insert after image element
      this.hasTitle = true;                                 // set hasTitle to true
    }
  });
}

function insertAfter(newNode, referenceNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

<div id="covers">
  <ul>
    <li><img title="Simply C++" src="http://test.deitel.com/images/thumbs/simplycpp.jpg"></li>
    <li><img title="Simply VB 2008" src="http://test.deitel.com/images/thumbs/simplyvb2008.jpg"></li>
    <li><img title="Simply Java" src="http://test.deitel.com/images/thumbs/simplyjava.jpg"></li>
  </ul>
</div>

The insertAfter function is from this stackoverflow answer.

JS AddEventListener Problems

2 Answers2