Пытаясь использовать indexOf, чтобы найти значение индекса массива при нажатии кнопок

Question

Я использую Adobe Animate CC для проекта холста. У меня есть массив, который я назначенные события слушателей нравится так:

for(var i = 0; i < navBtnArray.length; i++){ 
navBtnArray[i].addEventListener("click", navigationControls); 
} 

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

function navigationControls(e){ 

console.log(navBtnArray.indexOf(this)); 
} 

Но это продолжает возвращаться -1. Опять же это Animate CC, поэтому у меня нет доступа к jQuery. Анимация использует библиотеку CreateJS и EaselJS. Раньше я использовал indexOf в AS3, но, похоже, он не работает точно так же.

Answer 1

Попробуйте это:

var navBtnArray = document.getElementsByClassName('demo'); 
 
for(var i = 0; i < navBtnArray.length; i++){ 
 
(function(index){ 
 
     navBtnArray[i].onclick = function(){ 
 
       console.log(index) ; 
 
     }  
 
    })(i); 
 

 
}

<button class="demo">hi</button> 
 
<button class="demo">hi</button> 
 
<button class="demo">hi</button> 
 
<button class="demo">hi</button> 
 
<button class="demo">hi</button>

Answer 2

Для этого, вы можете использовать:

function navigationControls(e){ 
    console.log(navBtnArray.indexOf(e.target)); 
} 

Если это все еще не работает, и indexOf нельзя сравнивать такие объекты, вы можете попробовать добавление дополнительного имущества к объектам кнопки, например:

for(var i = 0; i < navBtnArray.length; i++){ 
    navBtnArray[i].addEventListener("click", navigationControls); 
    navBtnArray[i].index = i; 
} 

, а затем сделать:

function navigationControls(e){ 
    console.log(e.target.index); 
}