<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>
-
Возможный дубликат вопроса: Как отслеживать изменение класса– Air23 фев 2018 в 5:11
Добавить комментарий
|
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>
Или через добавленный в 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>