getElementByClassName не работает с addEventListener - PullRequest
Новая
       121

getElementByClassName не работает с addEventListener

0 голосов
/ 19 июня 2020

У меня есть три дивана каждый с "карточкой" класса. Я хочу выполнить функцию, когда пользователь щелкает любой из div с этим классом. Просто я могу использовать onclick для каждого из div (и он тоже работает), но это довольно длинный вок. В итоге я получил следующее: 

document.getElementByClassName("card").addEventListener("click", redirect);

Но после некоторого исследования я узнал, что getElementByClassName возвращает коллекцию, и мы должны использовать значения индекса для доступа к каждому элементу с ним, я наконец закончил с этим: 

var card = document.getElementByClassName("card");
for (var i = 0;i < card.length;i++){
    card[i].addEventListener("click", redirect);
}

Но это точно не работает.

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

1 Ответ

1 голос
/ 19 июня 2020

Используйте getElementsByClassName вместо getElementByClassName, это очень тонкая разница, поэтому мы все время от времени натыкаемся на нее 

const card = document.getElementsByClassName("card");

for (let i = 0; i < card.length; i++) {
  card[i].addEventListener("click", redirect);
}

function redirect(event) {
  console.log(event.target.textContent);
}
<div class="card">Item 1</div>
<div class="card">Item 2</div>
<div class="card">Item 3</div>
...