Typical Mouse event forloop

forloop.js

var lis = document.querySelectorAll("li");

for(var i = 0; i < lis.length; i++){
    lis[i].addEventListener("mouseover", function () {
        this.style.color = "green";
    });
    lis[i].addEventListener("mouseout", function () {
        this.style.color = "black";
    });
};


//Same Loop using classes. Style sheet added with the selected and done styles

// var lis = document.querySelectorAll("li");

// for(var i = 0; i < lis.length; i++){
//     lis[i].addEventListener("mouseover", function () {
//         this.classList.add("selected");
//     });
//     lis[i].addEventListener("mouseout", function () {
//         this.classList.remove ("selected");
//     });

//     lis[i].addEventListener("click", function () {
//         this.classList.toggle("done");
//     });
// };