Changing src on particular DOM elements

Question

I have an unordered list where each list item has a different image (src).

<ul class="sortable-listings-container">
  <li class="sortable-listing" data-page-id="563">
    <span class="sortable-listing-image">
      <img alt="Payments" class="internal" src="https://buildahead.com/wp-content/uploads/2017/02/happy-emoji-smaller-300x300.png"></img>
    </span>
  </li>
  <li class="sortable-listing" data-page-id="561">
    <span class="sortable-listing-image">
      <img alt="Invoice" class="internal" src="https://images-na.ssl-images-amazon.com/images/I/51zLZbEVSTL._SY355_.jpg"></img>
    </span>
  </li>
</ul>
(More li's not shown here...)

The end goal is to change the src image file upon hovering over a list item. I do not have the ability to directly edit the HTML (access to the repo) due to my work permissions. I wish for the resulting HTML to have additional unique onmouseover and onmouseleave attributes on each list item's element. Would look something like this:

<img alt="Payments" onmouseover="invert(this)" onmouseleave="revert(this)" class="internal" src="https://buildahead.com/wp-content/uploads/2017/02/happy-emoji-smaller-300x300.png"></img>
...
<img alt="Invoice" onmouseover="invert1(this)" onmouseleave="revert1(this)" class="internal" src="https://buildahead.com/wp-content/uploads/2017/02/happy-emoji-smaller-300x300.png"></img>

...and so on

The code below works for the first list item image but not for any others. I realize that the "if" statement stops once the condition is met in the first statement but how could I get it to continue?

var listItem = document.querySelector(".sortable-listing");    
var thumbnail = document.querySelector(".sortable-listing-image img.internal");

  if(listItem.dataset.pageId == '563') {
      thumbnail.setAttribute("onmouseover", "invert(this)");
      thumbnail.setAttribute("onmouseleave", "revert(this)");
  } else if (listItem.dataset.pageId == '561') {
      thumbnail.setAttribute("onmouseover", "invert1(this)");
      thumbnail.setAttribute("onmouseleave", "revert1(this)");
  }

// Image 1
function invert(image) {
  image.src = "https://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=7940438";
}
function revert(image) {
  image.src = "https://buildahead.com/wp-content/uploads/2017/02/happy-emoji-smaller-300x300.png";
}

// Image 2
function invert1(image) {
  image.src = "https://img.washingtonpost.com/news/morning-mix/wp-content/uploads/sites/21/2015/06/sleepy-face.png";
}
function revert1(image) {
  image.src = "https://images-na.ssl-images-amazon.com/images/I/51zLZbEVSTL._SY355_.jpg";
}

If I could edit the HTML directly I would just hard code the unique onmouseover and onmouseleave attributes to each list item. I realize that this isn't best practice but I'm not overly concerned with making this dynamic for this particular project (unless anyone has any clever ideas)...

I'm wondering if there is an array method I should be trying or somehow incorporating a "for loop", however, I feel with the "for loop" I run into the same problem as I'm dealing with above. Maybe I'm going about this all wrong??

I prefer a pure JavaScript solution for this problem but am open to hearing any solutions using JQuery as well. Any help is greatly appreciated. Thanks!

Answer 1

Inline event handlers are essentially eval inside HTML markup - they're bad practice and result in poorly factored, hard-to-manage code.

I'd suggest iterating over the elements with JavaScript instead and attaching listeners with https://developer.mozilla.org/en/DOM/element.addEventListener

const hoverImages = [
  'https://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=7940438',
  'https://img.washingtonpost.com/news/morning-mix/wp-content/uploads/sites/21/2015/06/sleepy-face.png',
  // ...
]

document.querySelectorAll('.sortable-listing-image > img.internal').forEach((img, i) => {
  const origImageSrc = img.src;
  img.addEventListener('mouseover', () => img.src = hoverImages[i]);
  img.addEventListener('mouseleave', () => img.src = origImageSrc);
});

Then you can list the new src s all at once, and you only have to use that one iteration function, rather than two for every element.

Answer 2

const hoverImages = ['https://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=7940438',  
'https://img.washingtonpost.com/news/morning-mix/wp- 
content/uploads/sites/21/2015/06/sleepy-face.png', ... ] 


document.querySelectorAll('.sortable-listing-image > img.internal').forEach((img, i) => {   
const origImageSrc = img.src;   
    img.addEventListener('mouseover', () => img.src = hoverImages[i]);   
    img.addEventListener('mouseleave', () => img.src = origImageSrc); });