I am having issue targeting a gallery image item with JS.

<script>
let imgs = document.querySelectorAll('section.page-section.gallery-section.full-bleed-section.background-width--full-bleed.section-height--medium.content-width--wide.horizontal-alignment--center img'); 
for (i= 0; i < imgs.length; i++) {
  alert("Hi!");
  i++;
}
  
</script>

<style>/*
section.page-section.gallery-section.full-bleed-section.background-width--full-bleed.section-height--medium.content-width--wide.horizontal-alignment--center img {
display: none !important;*/</style>

This is the code that I am working with. I am trying to have it match to www.chicagofashioncoalition.org. I am able to get the images to disappear with the CSS that I have commented out, yet, Squarespace seems to edit out the javascript with the nodelist. Anyone have any ideas why Squarespace is not liking this particular line of JavaScript text? I've seen people able to manipulate, so, I know that it's possible. 

8 hours ago, Jake235 said:

<script>
let imgs = document.querySelectorAll('section.page-section.gallery-section.full-bleed-section.background-width--full-bleed.section-height--medium.content-width--wide.horizontal-alignment--center img'); 
for (i= 0; i < imgs.length; i++) {
  alert("Hi!");
  i++;
}
  
</script>

<style>/*
section.page-section.gallery-section.full-bleed-section.background-width--full-bleed.section-height--medium.content-width--wide.horizontal-alignment--center img {
display: none !important;*/</style>

This is the code that I am working with. I am trying to have it match to www.chicagofashioncoalition.org. I am able to get the images to disappear with the CSS that I have commented out, yet, Squarespace seems to edit out the javascript with the nodelist. Anyone have any ideas why Squarespace is not liking this particular line of JavaScript text? I've seen people able to manipulate, so, I know that it's possible. 

I think you can apply the following event to make sure that all elements (including image) on your page is completely loaded 

<script>
  (function () {
    window.addEventListener('DOMContentLoaded', () => {
      // run your code here
    });
  })()

</script>

7 hours ago, bangank36 said:

I think you can apply the following event to make sure that all elements (including image) on your page is completely loaded 

<script>
  (function () {
    window.addEventListener('DOMContentLoaded', () => {
      // run your code here
    });
  })()

</script>

 

Thanks. For some reason, that worked. I don’t know why Squarespace doesn’t work the way that you would expect it too. 

May be your code runs at the time your images have not been loaded yet. Therefore, it can not work