CODEWITHSUNDEEP
javascriptarraysecmascript-6
Bartłomiej Kuźniar
Bartłomiej Kuźniar

Reputation: 33

ForEach ES6 didn't work

I've problem with forEach ES6. I wrote function which add element 'div' used pure javascript. I wanted remake code to ecmascript 6 and now code didn't work. Why? I think that code is write correct wrote in ecmascript 6.

Thanks for the help

This code works:

Javascript

function addElement() {
let linkToGallery = document.getElementsByClassName("gallery-1");
for (var i = 0; i < linkToGallery.length; i++) {
    linkToGallery[i].addEventListener('click', () => {
        const newDiv = document.createElement("div");
        const newDiv2 = document.createElement("div");
        newDiv.id = "buttonGallery";
        newDiv2.innerHTML = "";
        newDiv2.innerHTML += "<div id='test'>Test</div>";
        document.body.appendChild(newDiv);
        document.body.appendChild(newDiv2);
    });
}

}

and this code didn't works why if is the same?

Ecmascript 6

function addElement() {
let linkToGallery = document.getElementsByClassName("gallery-1");
linkToGallery.forEach((current) => {
    current.addEventListener('click', () => {
        const newDiv = document.createElement("div");
        const newDiv2 = document.createElement("div");
        newDiv.id = "buttonGallery";
        newDiv2.innerHTML = "";
        newDiv2.innerHTML += "<div id='test'>Test</div>";
        document.body.appendChild(newDiv);
        document.body.appendChild(newDiv2);
    });
});

}

Thanks for the help.

Upvotes: 1

Views: 2973

Answers (3)

zer00ne
zer00ne

Reputation: 43880

I always convert array-like objects to a real array, especially since it's a lot less code involved than it used to be:

 var realArray = Array.from(document.querySelectorAll('.ele'));

or

 var realArray = [...document.getElementsByClassName("ele")];

Demo

function addElement() {
  let linkToGallery = Array.from(document.getElementsByClassName("gallery-1"));
  linkToGallery.forEach((current) => {
    current.addEventListener('click', (e) => {
      var tgt = e.target;
      tgt.textContent = 'clicked';
      const newDiv = document.createElement("div");
      const newDiv2 = document.createElement("div");
      newDiv.id = "buttonGallery";
      newDiv2.innerHTML = "";
      newDiv2.innerHTML += "<div id='test'>Test</div>";
      document.body.appendChild(newDiv);
      document.body.appendChild(newDiv2);
    });
  });
}

addElement()
section {
  border: 3px dashed red
}

div {
  border: 1px dotted blue
}
<section class='gallery-1'>Gallery 1</section>
<section class='gallery-1'>Gallery 1</section>
<section class='gallery-1'>Gallery 1</section>
<section class='gallery-1'>Gallery 1</section>
<section class='gallery-1'>Gallery 1</section>

Upvotes: 3

Patrick Roberts
Patrick Roberts

Reputation: 51816

Another alternative to building a true Array would be to use document.querySelectorAll() to create a non-live NodeList which does have a forEach() method, unlike the live HTMLCollection returned by document.getElementsByClassName().

let linkToGallery = document.querySelectorAll('.gallery-1');

linkToGallery.forEach((current) => {
  current.addEventListener('click', () => {
    const newDiv = document.createElement('div');
    const newDiv2 = document.createElement('div');
    newDiv.className = 'buttonGallery';
    // or newDiv.setAttribute('class', ...)
    newDiv2.innerHTML = '<div class="test">Test</div>';
    document.body.appendChild(newDiv);
    document.body.appendChild(newDiv2);
  });
});
section {
  border: 3px dashed red
}

div {
  border: 1px dotted blue
}
<section class='gallery-1'>Gallery 1</section>
<section class='gallery-1'>Gallery 1</section>
<section class='gallery-1'>Gallery 1</section>
<section class='gallery-1'>Gallery 1</section>
<section class='gallery-1'>Gallery 1</section>

As a side note, you should use the class attribute instead of the id attribute, since they weren't unique within the document.

Upvotes: 2

ArtificialBug
ArtificialBug

Reputation: 31

You can iterate array-like with for/of:

var ref = document.getElementsByClassName('gallery-1')

for (var item of ref) {
    console.log(item);
}

As I see, TypedArray%.prototype[Symbol.iterator] is supported by pretty much everyone:

Symbol.iterator

Upvotes: 3

Related Questions