Aquí tengo un padre que contiene algunos niños. Quiero mostrar el índice (número) de cada niño en la consola haciendo clic en él. Intenté usar el método forEach para detectar al niño en el que hice clic, pero cuando intento obtener el índice del niño en el que hice clic, no funciona. Probé el método indexOf() pero muestra un error
let parent = document.querySelector('.parent'); let children = document.querySelectorAll('.child'); children.forEach(child => { child.onclick = function () { console.log( /* children.indexOf(child) */ ) // this is the method i tried but it didn't worked console.log( /*here i want to display the index of the clicked child */ ); } }); <div class="parent"> <div class="child">a</div> <div class="child">b</div> <div class="child">c</div> <div class="child">d</div> </div>Solo necesita convertir elementos Array.from de NodeList en una matriz (usando children ) para usar indexOf :
let parent = document.querySelector('.parent'); let children = document.querySelectorAll('.child'); children.forEach(child => { child.onclick = function () { console.log(Array.from(children).indexOf(child)); } }); <div class="parent"> <div class="child">a</div> <div class="child">b</div> <div class="child">c</div> <div class="child">d</div> </div>