Animating GIF on hover in Javascript

Question

I don't know JavaScript and it's safe to say this is my first code ever written in JS. I just needed to animate my GIFs when user hovers over them only. Googling separate concepts such as "string functions", "catch element mouse hover", "set element attribute", "get element attribute", "get elements by class", "var vs let" and so on, I came up with this:

    var contentClass = document.getElementsByClassName("gifclass");
     
    for(var i = 0; i < contentClass.length; i++)
    {
        let iElement = contentClass.item(i);
        
        iElement.addEventListener("mouseenter", function(event)
        {
            const srcAtt = iElement.getAttribute('src');
            let result = srcAtt.slice(0, srcAtt.length - 3);
            iElement.setAttribute("src", result + 'gif');

        }, false);
        
        iElement.addEventListener("mouseleave", function(event)
        {
            const srcAtt = iElement.getAttribute('src');
            let result = srcAtt.slice(0, srcAtt.length - 3);
            iElement.setAttribute("src", result + 'png');

        }, false);

    }
}

Prerequisites:

• You need to have a static version of the GIF that ends in png (I did that with MS Paint).
• It works so long as the GIFs are within the same class

Example:

 {
    var contentClass = document.getElementsByClassName("gifclass");
     
    for(var i = 0; i < contentClass.length; i++)
    {
        let iElement = contentClass.item(i);
        
        iElement.addEventListener("mouseenter", function( event )
        {
            const srcAtt = iElement.getAttribute('src');
            let result = srcAtt.slice(0, srcAtt.length - 3);
            iElement.setAttribute("src", result + 'gif');

        }, false);
        
        iElement.addEventListener("mouseleave", function( event )
        {
            const srcAtt = iElement.getAttribute('src');
            let result = srcAtt.slice(0, srcAtt.length - 3);
            iElement.setAttribute("src", result + 'png');

        }, false);

    }
}

Hover me: 
<img class="gifclass" src="https://gameeditor2.sirv.com/website/GIFs/game-mode.png" alt="" data-image-width="320" data-image-height="240">

---

All in all, my initial research on how to do that only pointed out examples where I had to do plenty of code for all of my 20+ GIFs and handle them separately.

It works, but considering that I don't know JS I was thinking it might be useful to share it for a review

Answer 1

You can swap out document.getElementsByClassName() with document.querySelectorAll(). One reason is that you can use a selector and not just classes. The other reason is that it returns a NodeList, a different kind of array-like structure that conveniently has a forEach() method which can replace your loop.

You can also replace function declarations function() {} with the shorter arrow functions () => {}. There are technical differences between the two. But in this case, we're just after making the function a bit more concise.

Element attributes often map to DOM object properties (with some exceptions). Because of this, you can just access/assign the value to the HTML attribute directly like an object property, no need to getAttribute() or setAttribute().

You can use Regular Expressions and string.replace() to find the extension of the src. RegEx is a more advanced topic, but it gives you a lot of power when it comes to string matching. In this case, we're looking for the extension of the image and RegEx conveniently has the $ symbol which denotes the end of the string.

Lastly, if you decide to use different paths for your pngs and gifs (i.e. more than just an extension swap), then consider using data attributes to hold your paths. You can then rewrite your JS to swap the src to one of two data attributes, one holding the png path and the other the gif path.

That said, your code could be as short as:

document.querySelectorAll('img.gif-class').forEach(element => {
  element.addEventListener('mouseenter', event => {
    element.src = element.src.replace(/\.png$/, '.gif')
  })

  element.addEventListener('mouseleave', event => {
    element.src = element.src.replace(/\.gif$/, '.png')
  })
})