добавление класса к элементу с помощью наведения мыши, используя javascript

Question

Я пытаюсь создать кнопки, у каждой из которых есть эффекты при наведении мыши. Кажется, я не могу понять, когда завис при button. Я хочу добавить к ним класс css, чтобы анимация имела эффект .

это мой css класс, который я хочу назвать .player

.playerside {
animation: myframe 0.3s ease-in-out 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}

@keyframes myframe {
0% {
    opacity: 0;
    transform: scale(0);
}
50% {
    opacity: 0.2;
}
80% {
    opacity: 0.5;
}
100% {
    opacity: 1;
    transform: scale(1);
}
}

это то, что я пробовал на javascript, я всегда получаю консольную ошибку "rps.js:10 Uncaught TypeError: Cannot read property 'add' of undefined at HTMLDivElement.displaychoice (rps.js:10)"

const gameManager =
{
    choices: document.querySelectorAll('.choices'),
    displaymsg: function (e)
    {
        console.log(e.target.id);
    },
    displaychoice: function (e)
    {
        e.classList.add('darken');
    }
}
gameManager.choices.forEach(index => index.addEventListener('click', gameManager.displaymsg));
gameManager.choices.forEach(index => index.addEventListener('mouseover', gameManager.displaychoice));

Answer 1

Вы пытались получить доступ к .classList.add() в событии. Помните, что это событие, и вы все равно должны получить цель этого события и затем получить доступ к classList.add.

displaychoice: function (e)
{
    e.target.classList.add('darken'); //SOLUTION
}