Make eventlistener happen to my whole list

Somehow my eventlistener only works on the last list item. Can someone help me?

This is my code right now:

    (function(){
    // All items we'd like to add
    var navItems = [
        {href: 'http://instagram.com', text: 'Instagram'},
        {href: 'http://twitter.com', text: 'Twitter'},
        {href: 'http://facebook.com', text: 'Facebook'},
        {href: 'http://google.com', text: 'Google'},
        {href: 'https://youtube.com', text: 'Youtube'}
    ];

    // A few variables for use later
    var navElem = document.createElement("nav"),
        navList = document.createElement("ul"), 
        navItem, navLink;
        navElem.setAttribute('style','');
        navList.setAttribute('style','height: 100px;display:flex;');

    navElem.appendChild(navList);

    // Cycle over each nav item
    for (var i = 0; i < navItems.length; i++) {
        // Create a fresh list item, and anchor
        navItem = document.createElement("li");
        navLink = document.createElement("a");
        navItem.setAttribute('style','list-style-type:none; padding-top: 8px;background-color:rgb(209, 157, 12);margin: 30px 20px;border-radius:50px;');
        navLink.setAttribute('style','padding:0px 20px;text-decoration:none;font-size:20px;color:white;');



        // Set properties on anchor
        navLink.href = navItems[i].href;
        navLink.innerHTML = navItems[i].text;

        // Add anchor to list item, and list item to list
        navItem.appendChild(navLink);
        navList.appendChild(navItem);
    }
    
    navItem.addEventListener('mouseenter', () =>
    navItem.setAttribute('style','list-style-type:none; padding-top: 8px;background-color:rgba(209, 157, 12, 0.644);margin: 30px 20px;border-radius:50px;'));
    navItem.addEventListener('mouseleave', () =>
    navItem.setAttribute('style','list-style-type:none; padding-top: 8px;background-color:rgb(209, 157, 12);margin: 30px 20px;border-radius:50px;'));

    navList.children[0].className = "current";

    // Add list to body (or anywhere else)
    window.onload = function () {
        document.body.before(navElem);
    }

}());

GIF of my problem: https://gyazo.com/f70b7723958b24f2d8243af1e1434bd9

Thanks in advance! 🙂

>Solution :

You’re adding event listener outside the for loop. The variable navItem holds reference to the last item after the loop is done. So, mouseenter and mouseleave are working only for the last item

Do something like this… Hope this helps!

function onMouseEnter (e) {
    var navItem = e.target;
    navItem.setAttribute('style','list-style-type:none; padding-top: 8px;background-color:rgba(209, 157, 12, 0.644);margin: 30px 20px;border-radius:50px;');
}

function onMouseLeave (e) {
    var navItem = e.target;
    navItem.setAttribute('style','list-style-type:none; padding-top: 8px;background-color:rgb(209, 157, 12);margin: 30px 20px;border-radius:50px;')
}

// Cycle over each nav item
for (var i = 0; i < navItems.length; i++) {
    // Create a fresh list item, and anchor
    navItem = document.createElement("li");
    navLink = document.createElement("a");
    navItem.setAttribute('style','list-style-type:none; padding-top: 8px;background-color:rgb(209, 157, 12);margin: 30px 20px;border-radius:50px;');
    navLink.setAttribute('style','padding:0px 20px;text-decoration:none;font-size:20px;color:white;');



    // Set properties on anchor
    navLink.href = navItems[i].href;
    navLink.innerHTML = navItems[i].text;

    // Add anchor to list item, and list item to list
    navItem.appendChild(navLink);
    navList.appendChild(navItem);
    navItem.addEventListener('mouseenter', onMouseEnter);
    navItem.addEventListener('mouseleave', onMouseLeave);
}