Изменить стиль нодлиста элемента при событии щелчка - PullRequest
Новая
       14

Изменить стиль нодлиста элемента при событии щелчка

0 голосов
/ 20 сентября 2018

У меня проблема с добавлением обработчика событий в список узлов на этом веб-сайте, с которым я играю.

Мне бы хотелось, чтобы элементы с картой класса -img-overlay чтобы изменить их стиль при наведении мыши .

Итак, первое, что я попробовал, это добавить цикл for, например: 

var banner = document.getElementsByClassName("card-img-overlay");

// add a for loop for event listeners on the nodelist
for ( i = 0; i < banner.length; i++) {
    banner[i].addEventListener("click",function(){
 banner[i].style.backgroundColor = "black"});
};

ИЯ получаю следующее ошибка :

VM95: 3 Uncaught TypeError: Невозможно прочитать свойство 'style' из undefined в HTMLDivElement.(: 3: 12)

Как лучше добавить EventListener в список узлов?Я еще не изучал jQuery, поэтому я предпочитаю придерживаться VanillaJS.

Большое спасибо!

1 Ответ

0 голосов
/ 20 сентября 2018

Когда срабатывает событие щелчка, оно больше не знает, что такое i.Вы можете ссылаться на выбранный элемент с помощью this. 

var banner = document.getElementsByClassName("card-img-overlay");

// add a for loop for event listeners on the nodelist
for ( i = 0; i < banner.length; i++) {
    banner[i].addEventListener("click",function() {
        // function will never know what 'i' is here
        this.style.backgroundColor = "black"
    });
};

Fiddle: https://jsfiddle.net/kcr7gLx1/2/

...