Aquí está la pieza de código HTML. Capturé los elementos de botón usando document.getElementsByClassName('buttonEl') y agregué un eventListener. Y quiero el índice del botón en particular cuando se hace clic en él.
<div class="action"> <div class="buttonEl"></div> <div class="buttonEl"></div> <div class="buttonEl"></div> </div>Esta sería una forma de hacerlo...
document.querySelectorAll obtendrá una matriz de elementos (botones) según el selector de clase.
Luego recorremos esta matriz usando forEach : el button es el elemento actual sobre el que estamos iterando, mientras que el index es el índice de ese elemento en la matriz.
Finalmente, durante el bucle, adjuntamos un detector de eventos de "clic" a cada botón y cuando se activa ese evento, consolamos el índice anterior.
const buttons = document.querySelectorAll('.buttonEl') buttons.forEach(function(button, index){ button.addEventListener('click', function(){ console.log(index) }) }) .action{ display: flex; justify-content: space-around; } .buttonEl { background-color: #CCC; padding: 10px; border-radius: 5px; } <div class="action"> <div class="buttonEl">Foo</div> <div class="buttonEl">Bar</div> <div class="buttonEl">Baz</div> </div>Creo que estás buscando el método de matriz indexOf .
// Arrays have the indexOf method, but NodeLists do not const buttons = Array.from(document.querySelectorAll('.buttonEl')); const buttonParent = document.querySelector('.action'); buttonParent.addEventListener('click', (evt) => { let target = evt.target; let index = buttons.indexOf(target); console.log(index); });