EventListener не является функцией

Question

Пытается создать событие для запуска после нажатия ссылки нижнего колонтитула.

var hooray = function(event) { 
 
    console.log("hooray"); 
 
}; 
 

 
var footer_link = document.getElementsByClassName('footer-link'); 
 
console.log(footer_link); 
 
footer_link.addEventListener('click', hooray, false);

<li class="footer-link">Title link 
 
    <ul class="footer-link-sub"> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    </ul> 
 
</li>

я получаю ошибку "неперехваченным TypeError: footer_link.addEventListener не является функцией". Если eventListener вынут, консоль будет записывать правильный ли из разметки. Или, если селектор элементов удален из addEventListener, он будет срабатывать при каждом щелчке по странице. Что я делаю неправильно, чтобы выбрать элемент?

Answer 1

getElementsByClassName возвращает NodeList - то есть список, содержащий более одного элемента.

Если вы хотите первый, вам необходимо получить к нему доступ [0]. То есть доступ к нему с помощью индексатора. NodeLists индексируются (например, массивы), поэтому [0] возвращает первый элемент, [1] возвращает второй элемент и так далее - в вашем случае есть только один элемент.

var hooray = function(event) { 
 
    alert("hooray"); 
 
}; 
 

 
var footer_link = document.getElementsByClassName('footer-link'); 
 
console.log(footer_link); 
 
// Note the [0] here 
 
footer_link[0].addEventListener('click', hooray, false);

<li class="footer-link">Title link 
 
    <ul class="footer-link-sub"> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    </ul> 
 
</li>

Answer 2

Это потому, что «getElementByClassName» возвращает массив, так что вам нужно, чтобы выбрать первый элемент массива. Попробуйте использовать footer_link[0]

var hooray = function(event) { 
 
    console.log("hooray"); 
 
}; 
 

 
var footer_link = document.getElementsByClassName('footer-link'); 
 
console.log(footer_link); 
 
footer_link[0].addEventListener('click', hooray, false);

<li class="footer-link">Title link 
 
    <ul class="footer-link-sub"> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    <li><a href="">link</a></li> 
 
    </ul> 
 
</li>