Javascript Select Multiple Images of same Class

Question

I have written a javscript code but I can't get it work for some reason :(

Basically, I have a gallery that loads multiple images, but I want to limit it to 6 pictures only. Those images have all the same classes. I want to select each image and put "display:none" until there's only 6 left then stop.

Here's the code:

<script>
    var storyCount = document.querySelectorAll(".e-gallery-item.elementor-gallery-item");

    
    for(var i = 6; i < storyCount.length; i++)
    storyCount[i].style.display='none';

</script>

question from:https://stackoverflow.com/questions/65855686/javascript-select-multiple-images-of-same-class

Answer 1

It doesn't work, because storyCount isn't an array. Its an object which is returned from document.querySelectorAll. So you need to modify condition of for loop like this

<script>
    var storyCount = document.querySelectorAll(".e-gallery-item.elementor-gallery-item");

    
    for(var i = 6; i < Object.entries(storyCount).length; i++)
      storyCount[i].style.display='none';

</script>

See my demo example

const storyCount = document.querySelectorAll(".image");
console.log(typeof storyCount)
for(let i = 6; i < Object.entries(storyCount).length; i++)
  storyCount[i].style.display='none';

.image {
  width: 150px;
  height: 110px;
}

<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" class="image" />
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" class="image" />
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" class="image" />
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" class="image" />
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" class="image" />
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" class="image" />
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" class="image" />
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" class="image" />
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" class="image" />
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" class="image" />
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" class="image" />
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" class="image" />