Estaba tratando de resaltar algunos elementos en el mouseover del evento usando javascript simple. Mi código está abajo.
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <div id="container" class="container"> <div class="class1">Class 1</div> <div class="class1">Class 2</div> <div class="class1">Class 3</div> </div> <script> var class1 = document.getElementsByClassName("class1"); for (var i = 0; i < class1.length; i++) { class1[i].addEventListener('mouseover', function () { console.log(class1[i]) this.setAttribute("style", "background-color:cyan;color:#ffffff") // class1[i].innerHTML += "working "; }) class1[i].addEventListener('mouseleave', function () { console.log(class1[i]) this.setAttribute("style", "background-color:#fff;color:#000") // class1[i].innerHTML += "working "; }) } </script> </body> </html>Noté que class1[i] no está definido, pero 'esto' no lo está. ¿Por que es esto entonces?