Usando addEventListener y getElementsByClassName para pasar una identificación de elemento

Buscamos por diferentes foros y así traerte la respuesta a tu dilema, si tienes alguna duda puedes dejar tu inquietud y respondemos con gusto.

Solución:

demostración de código abierto

var userSelection = document.getElementsByClassName('menu');

for(var i = 0; i < userSelection.length; i++) 
  (function(index) 
    userSelection[index].addEventListener("click", function() 
       console.log("Clicked index: " + index);
     )
  )(i);

Como señaló @torazaburo en los comentarios, puede usar lo siguiente si los navegadores que desea admitir cumplen con ECMAScript 6 (ES6), la versión más reciente de JavaScript.

var userSelection = document.getElementsByClassName('menu');

for(let i = 0; i < userSelection.length; i++) 
  userSelection[i].addEventListener("click", function() 
    console.log("Clicked index: " + i);
  )

Puede obtener la identificación del elemento que respondió al evento de clic con this.id:

var items = document.getElementsByClassName('menu');
for (var i = 0; i < items.length; i++) 
  items[i].addEventListener('click', printDetails);


function printDetails(e) 
  console.log("Clicked " + this.id);

   
Robert Smith
   
Jane Doe
   
Susan Carter

Así es como lo haría. Primero crearía un array utilizando valores de objeto.

const userSelection = Object.values(document.getElementsByClassName('menu'));

Luego los recorrería usando un foreach.

userSelection.forEach(link => 
    link.addEventListener(event => 
        event.preventDefault();
        // more code here
    );
);

¡Pan comido!

Si te apasiona la programación, puedes dejar una reseña acerca de qué te ha gustado de este tutorial.

---

---

Utiliza Nuestro Buscador