Home How to make a function apply to several Ids, activating for the one which was clicked on

Questions

How to make a function apply to several Ids, activating for the one which was clicked on

November 8, 2023

I am currently implementing Fullscreen API for a 12 image long gallery. I’m very new to using javascript but time is of the essence here as it is for a college project due on monday and it is only one of the several requirements for it that I’ve yet to fullfil. Is there a way to have a function activating onclick that applies specifically to the clicked on object not a set Id or do I have to repeat the same function 12 times with different Ids?

<script>

var elem = document.getElementById("image1");

function openFullscreen() {
  if (image1.requestFullscreen) {
    image1.requestFullscreen();
  } else if (image1.webkitRequestFullscreen) { 
    image1.webkitRequestFullscreen();
  } else if (image1.msRequestFullscreen) { 
    image1.msRequestFullscreen();
  }
}
</script>

thanks for any and all advice

>Solution :

Give the same class to all element you need to select:

<img class="img" src="..."/>
<img class="img" src="..."/>
<img class="img" src="..."/>
...

In js with document.querySelectorAll:

const images = document.querySelectorAll(".img");
images.forEach((image) =>
    image.addEventListener("click", () => openFullscreen(image))
);

function openFullscreen(image) {
    if (image.requestFullscreen) {
        image.requestFullscreen();
    } else if (image1.webkitRequestFullscreen) {
        image.webkitRequestFullscreen();
    } else if (image1.msRequestFullscreen) {
        image.msRequestFullscreen();
    }
}