How to add an event or function in JavaScript to an HTML collection?

I have the following JavaScript , where I get an HTML element(grid) and the HTML element children (photos inside the grid).

let Galeria = document.getElementById("CaixaGaleria");
let GaleriaPhoto = document.getElementById("CaixaGaleria").children;

This is the HTML :

 <div id ="CaixaGaleria" class="gallery">
    <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="pequeno"><img src="Imagens/Filme/14.jpg"></div>
    <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="medio"><img src="Imagens/Filme/16.jpg"></div>
    <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="grande"><img src="Imagens/Filme/17.jpg"></div>
    <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="pequeno"><img src="Imagens/Filme/20.jpg"></div>
    <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="medio"><img src="Imagens/Filme/22.jpg"></div>
    <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="grande"><img src="Imagens/Filme/27.jpg"></div>
    <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="pequeno"><img src="Imagens/Filme/37.jpg"></div>
    <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="medio"><img src="Imagens/Filme/42.jpg"></div>
    <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="grande"><img src="Imagens/Filme/53.jpg"></div>
  </div>

My goal is to add an EventListener to the children , so that when I click on them the image is displayed on it's original size and ratio , something like this :

GaleriaPhoto.addEventListener("click" , function(){
    *this function should display image's original size on a new window or popup*
 }
  );

However , I can't add an EventListener to this element nor a ForEach() or push().

I will always get some error like "TypeError: GaleriaPhoto.addEventListener is not a function".

I can do it , to the 1st variable but not the second one , so I assume the problem is something related to the fact that it is an HTML colection ?

Solution

You need to iterate over each child node and apply the event listener, .children returns a collect type called HTMLCollection (which does not have a .addEventListener function), not a html node itself (which does). But you can iterate over it like a normal array.

So something like

<div id ="CaixaGaleria" class="gallery">
  <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="pequeno"><img src="Imagens/Filme/14.jpg"></div>
  <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="medio"><img src="Imagens/Filme/16.jpg"></div>
  <div data-tecnica="lapis" data-estilo="retrato" data-tamanho="grande"><img src="Imagens/Filme/17.jpg"></div>
  <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="pequeno"><img src="Imagens/Filme/20.jpg"></div>
  <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="medio"><img src="Imagens/Filme/22.jpg"></div>
  <div data-tecnica="aguarela" data-estilo="paisagem" data-tamanho="grande"><img src="Imagens/Filme/27.jpg"></div>
  <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="pequeno"><img src="Imagens/Filme/37.jpg"></div>
  <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="medio"><img src="Imagens/Filme/42.jpg"></div>
  <div data-tecnica="oleo" data-estilo="ilustração" data-tamanho="grande"><img src="Imagens/Filme/53.jpg"></div>
</div>
<script>
  let Galeria = document.getElementById("CaixaGaleria");
  let GaleriaPhotos = document.getElementById("CaixaGaleria").children;
  for(let x = 0; x < GaleriaPhotos.length; x++) {
    GaleriaPhotos[x].addEventListener("click" , function(){
        alert("blah");
      }
    );
  }
</script>