addEventListener для массива, чтобы изменить несколько цветов кнопки?

Question

Мне постоянно говорят, что buttonArray.addEventListener не является функцией, и я не уверен, почему.Все еще новичок в JS, любая помощь приветствуется.

Попытка сделать forEach не помогла.

let button = document.querySelectorAll('.btn');
console.log(button);

let buttonArray = Array.from(button);

buttonArray.addEventListener('mouseover', event => {
    event.target.style.color = 'red';
});

Answer 1

Используйте это, вы возвращаете массив, и вам нужно добавить событие к каждому элементу

let button = document.querySelectorAll('.btn');
console.log(button);

let buttonArray = Array.from(button);//this is an array here
console.log(buttonArray)
//using foreach to add eventlistener to every element in array
buttonArray.forEach(a=>a.addEventListener('mouseover', event => {
    event.target.style.color = 'red';
}))

<button class="btn">hello</button>
<button class="btn">hello</button>
<button class="btn">hello</button>
<button class="btn">hello</button>

Answer 2

Вам нужно перебрать весь массив, используя for of и addEventListener для них в loop

let button = document.querySelectorAll('.btn');
console.log(button);

let buttonArray = Array.from(button);
for(let button of buttonArray){
    button.addEventListener('mouseover', event => {
        event.target.style.color = 'red';
    });
}

Answer 3

Вам необходимо прикрепить прослушиватель событий к самим кнопкам, а не к массиву кнопок.Попробуйте это

 let button = document.querySelectorAll('.btn');
 console.log(button);

 let buttonArray = Array.from(button);

 buttonArray.forEach(btn => {
   btn.addEventListener('mouseover', event => {
     event.target.style.color = 'red';
   });
 });