Невозможно прочитать свойства неопределенного значения из цикла For [закрыто] ⇐ Html

[Anonymous]

У меня есть функция цикла for, которая проходит через коллекцию HTML и добавляет прослушиватель событий к элементам в коллекции. Моя проблема в том, что я получаю сообщение об ошибке о том, что функция событий не может прочитать свойства «неопределенных». Я пытаюсь передать элементы коллекции HTML в качестве аргументов функции события. Как это исправить?
main.js:5 Uncaught TypeError: Cannot read properties of undefined (reading 'style')
at HTMLImageElement. (main.js:5:22)
(anonymous) @ main.js:5

function main(){
heads = document.getElementsByClassName("heads");
for(var i = 0; i < heads.length; i++){
heads.addEventListener("mouseover", function(){
heads.style.animation = "colorIn 2s";
heads.style.filter = "none";
}
)
}
}








player tracker


players online:












.heads{
height:125px;
margin: 54px;
filter: grayscale();
animation: none;
}

@keyframes colorIn{
50% {filter:blur()}
100% {filter:none}
}