Home / Questions / 104780
Accepted
Eduardo Sebastian
Asked: 2020-09-26 02:15:25 +0800 CST 2020-09-26 02:15:25 +0800 CST

Error looping with forEach

  • 772

Why does it tell me that forEach is not a function?

What I do is get the elements with class 'classes' and then assign each one an onclick event, but it doesn't WORK for me

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>

javascript

4 Answers

  1. Best Answer

    The problem is that document.getElementsByClassNameit doesn't return a Array, but an object HTMLCollectionthat, although it is very similar to an array, does not have any of the functions that the class Arrayhas to iterate through the elements.

    One solution would be to "steal" Arraythe function forEachto use it on this object:

    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>

    What this code does is execute the method forEach, Arraybut assigning it ias a context (the thisinside that function)

    • 5

  2. The problem is that getElementsByClassNameit does not return an object Arraybut one HTMLCollectionthat does not have the method 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>

    • 3

  3. As you have been told above, you cannot treat the object as an array, but you can extract the data from the object to save them in one.

    Array.from()

    The Array.from() method creates a new Array instance from an iterable object.

    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>

    Here is a link to the document.

    • 2

  4. I leave you an example working:

    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>

    • 1