ARTICLE AD BOX
I have a for loop function that loops through an HTML collection and adds an eventlistener to the elements in the collection. My problem is that I get an error about the event function being unable to read properties of "undefined". I try to pass elements of the HTML collection as arguments to the event function. How do I fix this?
main.js:5 Uncaught TypeError: Cannot read properties of undefined (reading 'style') at HTMLImageElement.<anonymous> (main.js:5:22) (anonymous) @ main.js:5 function main(){ heads = document.getElementsByClassName("heads"); for(var i = 0; i < heads.length; i++){ heads[i].addEventListener("mouseover", function(){ heads[i].style.animation = "colorIn 2s"; heads[i].style.filter = "none"; } ) } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="main.css" rel="stylesheet"> <title>player tracker</title> </head> <body id="main" onload="main()"> <h1>players online:</h1> <img src="https://mc-heads.net/avatar/Xx_DruceGamer_xX.png" class="heads" id="me" height="125px"> <img src="https://mc-heads.net/avatar/Jimbout527.png" class="heads"> <img src="https://mc-heads.net/avatar/Jimbout216.png" class="heads"> <img src="https://mc-heads.net/avatar/mrwolffff.png" class="heads"> <img src="https://mc-heads.net/avatar/MohMohMoh.png" class="heads"> <img src="https://mc-heads.net/avatar/wild_billy.png" class="heads"> <img src="https://mc-heads.net/avatar/coco_lover123.png" class="heads"> <img src="https://mc-heads.net/avatar/YAKOBISAAC5687.png" class="heads"> <script src="main.js"></script> </body> </html> .heads{ height:125px; margin: 54px; filter: grayscale(); animation: none; } @keyframes colorIn{ 50% {filter:blur()} 100% {filter:none} }