3

Por qué me dice que forEach no es una función?

Lo que hago es obtener los elementos con clase 'clases' y luego asignarle a cada uno un evento onclick, pero no me FUNCIONA

window.addEventListener("DOMContentLoaded", () => { 
 var i = document.getElementsByClassName('clases');
 i.forEach(e => {
 e.onclick = () => {alert('BonApetit');};
 });
 
});
<a class="clases">Enlace 1</a>
<a class="clases">Enlace 2</a>
<a class="clases">Enlace 3</a>
<a class="clases">Enlace 4</a>

4 respuestas 4

5

El problema es que document.getElementsByClassName no devuelve un Array, sino un objeto HTMLCollection que, aunque es muy similar a un array, no tiene ninguna de las funciones que la clase Array tiene para recorrer los elementos.

Una solución sería "robar" a Array la función forEach para usarla sobre este objeto:

window.addEventListener("DOMContentLoaded", () => { 
 var i = document.getElementsByClassName('clases');
 Array.prototype.forEach.call(i,e => {
 e.onclick = () => {alert('BonApetit');};
 });
 
});
<a class="clases">Enlace 1</a>
<a class="clases">Enlace 2</a>
<a class="clases">Enlace 3</a>
<a class="clases">Enlace 4</a>

Lo que hace este código es ejecutar el método forEach de Array, pero asignando i como contexto (el this dentro de esa función)

3

El problema es que getElementsByClassName no devuelve un objeto Array si no un HTMLCollection que no tiene el método forEach:

window.addEventListener("DOMContentLoaded", () => { 
 var i = document.getElementsByClassName('clases');
 for(var cont=0; cont < i.length; cont++){
  i.item(cont).onclick = () => {alert('BonApetit');};
 } 
});
<a class="clases">Enlace 1</a>
<a class="clases">Enlace 2</a>
<a class="clases">Enlace 3</a>
<a class="clases">Enlace 4</a>

2

Como te han comentado arriba, no puedes tratar al objeto como array, pero si puedes extraer del objeto los datos para guardarlos en uno.

Array.from()

El método Array.from() crea una nueva instancia de Array a partir de un objeto iterable.

window.addEventListener("DOMContentLoaded", () => { 
 var i = Array.from(document.getElementsByClassName('clases'));
 i.forEach(e => {
 e.onclick = () => {alert('BonApetit');};
 });
 
});
<a class="clases">Enlace 1</a>
<a class="clases">Enlace 2</a>
<a class="clases">Enlace 3</a>
<a class="clases">Enlace 4</a>

Te dejo aqui un link a la docu.

1
  • Otra buena opción, probablemente más general que la mía Commented el 25 sept. 2017 a las 10:38
1

Te dejo un ejemplo funcionando:

window.addEventListener("DOMContentLoaded", () => { 
 var i = document.getElementsByClassName('clases');
Array.prototype.forEach.call(i, function(elements, index) {
    elements.onclick = () => {alert('BonApetit');};
});
});
<a class="clases">Enlace 1</a>
<a class="clases">Enlace 2</a>
<a class="clases">Enlace 3</a>
<a class="clases">Enlace 4</a>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.