Невозможно установить свойство 'boxShadow' для undefined - стиль в js

Question

Я полностью не знаю, почему этот код не работает.В консоли появилось предупреждение: "Uncaught TypeError: Невозможно установить свойство 'boxShadow' из неопределенного в HTMLDivElement.el.addEventListener" Мой код:

document.addEventListener('DOMContentLoaded', function() {
    const card = document.querySelectorAll('.projects_pic');

    for(let el of card){
    
        el.addEventListener('mouseover',  () =>{
            this.style.boxShadow = "-1px 9px 40px -1px black";
        })
    }
    

});

Answer 1

this - ссылка на корневой документ, передача параметра в вашу функцию и использование .target

document.addEventListener('DOMContentLoaded', function() {
  const card = document.querySelectorAll('.projects_pic');

  for (let el of card) {
    el.addEventListener('mouseover', (el) => {
      el.target.style.boxShadow = "-1px 9px 40px -1px black";
    })
  }
});

<div class="projects_pic">test</div>
<br>
<div class="projects_pic">example</div>

Answer 2

Спасибо за вашу помощь.Я изменил это - e.target, и теперь все в порядке.Я должен прочитать об этом в функции стрелка и это.

Answer 3

Это означает, что this.style равно undefined.
Функция стрелки связывает контекст , поэтому this - это не элемент, над которым вы наводите курсор.
Используйте function(){/*content*/} вместо

document.addEventListener('DOMContentLoaded', function() {
    const card = document.querySelectorAll('.projects_pic');

    for(let el of card){
    
        el.addEventListener('mouseover',  function(){
            this.style.boxShadow = "-1px 9px 40px -1px black";
        })
        
    }
    

});

div {
 width: 10px;
 height: 10px;
 background-color: yellow; 
}

<div class="projects_pic"></div>