0
<body>
<div id ='container'>
    <div class='dot'>as1</div>
    <div class='dot'>sa2</div>
    <div class='dot'>as3</div>
    <div class='dot'>as4</div>
</div>
<script>
    var cont = document.getElementById("container");
    var dots = document.getElementsByClassName('dot');
        cont.addEventListener("click", function(event) {
            console.log(dots.indexOf(event.target)); // indexOf не работает
        });
</script>
</body>
1

2 ответа 2

2

getElementsByClassName возвращает не массив, а похожий на массив набор элементов:

var cont = document.getElementById("container");
var dots = document.getElementsByClassName('dot');
cont.addEventListener("click", function(event) {
  console.log(Array.prototype.indexOf.call(dots, event.target)); // indexOf работает
});
<div id='container'>
  <div class='dot'>as1</div>
  <div class='dot'>sa2</div>
  <div class='dot'>as3</div>
  <div class='dot'>as4</div>
</div>

0

Или через добавленный в es6 оператор ...

var cont = document.getElementById("container");
cont.addEventListener("click", function(event) {
  console.log([...document.getElementsByClassName('dot')].indexOf(event.target)); // indexOf работает
});
<div id='container'>
  <div class='dot'>as1</div>
  <div class='dot'>sa2</div>
  <div class='dot'>as3</div>
  <div class='dot'>as4</div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.