Почему когда я повесил обработчик события на DIV браузер выдает ошибку что div.addEventListener is not a function?

Question

[MihailDonskoy]

var skin1 = document.getElementsByClassName("skin_1");
skin1.addEventListener("click", function(){
        console.log("hi");
});

Answer 1

[justdealman]

Потому что skin1 в данном случаем возвращает массив.

Делайте так:

var skin1 = document.getElementsByClassName("skin_1");
for (var i=0 ; i<skin1.length; i++) {
  skin1[i].addEventListener("click", function(){
          console.log("hi");
  });
}

Comments

[MihailDonskoy]

почему массив?

[myspace]

MihailDonskoy: массив элементов с этим классом, это же не ид

[MihailDonskoy]

так пишу ID такая-же фигня

[justdealman]

Да нет, с id полный порядок — https://jsfiddle.net/gm3899cb/

[MihailDonskoy]

Спасибо большое тупанул,не убрал s

[MihailDonskoy]

А скажите, т.е если я хочу взять 1 элемент то мне надо ид использовать

[MihailDonskoy]

или класс но через переборку массива

[justdealman]

Если элемент с таким классом единственный, можно обратиться к нему сразу skin1[0].addEventListener('click')

[ZaxapKramer]

MihailDonskoy, и используйте лучше ES6, иначе потом будут проблемы, как у меня, засевшего в эпохе IE6 :)

[MihailDonskoy]

а в ES6 как будет?

Answer 2

[dom1n1k]

Вероятно потому, что getElementsByClassName возвращает список элементов, а не одиночный элемент?

Comments

[MihailDonskoy]

да нет,возвращает 1 див

[dom1n1k]

MihailDonskoy: список там, проверяй внимательнее.

Answer 3

[Николай Шабалин]

Присоединюсь.
getElementsByClassName - возвращает коллекцию (массив).
Ознакомьтесь с пруфами 1, 2

Дополню.
Возможно addEventListener лучше не использовать, т.к. может повесится несколько обработчиков делающих одно и то же. Если заметите, что клик срабатывает несколько раз, перепишите на onclick

Answer 4

[Владимир Куликов]

Мне помогла замена на такой код:

$(document).ready(function() {
    document.addEventListener( 'wpcf7submit', function( event ) {
        if ( '148' == event.detail.contactFormId ) { // Замените id на свою форму
            alert( "Опачки, меня пытаются отправить... в Магадан!" );
        }
    }, false );
});