Trying to insert custom scripts on filtered view event pages

Hi folks, wondering if anyone can help.

I'm trying to use javascript to add some custom code to a filtered view of events on squarespace (so a filtered view of a category).

(what i'm trying to do eventually is to add in some extra links above the "filtering by" text. )

I thought i'd do an initial test to see if I could get some code applied to the page (i.e just changing the background colour of the block). 

But it seems like something is happening when I try to apply the code to this page.  My code is super simple (see below)...

<script>
const filteredView = document.querySelectorAll("div.sqs-events-collection-list")
  
filteredView.style.backgroundColor = '#000000'
  
</script>

However, when I check the console, everything I try to set just keeps coming up as "undefined". 

Does anyone know if there's something that blocks scripts on category pages? or perhaps there's something i'm missing!

i've tried adding the script to both the footer and header injection...

any help or advice appreciated!

12 hours ago, LauraF101 said:

Hi folks, wondering if anyone can help.

I'm trying to use javascript to add some custom code to a filtered view of events on squarespace (so a filtered view of a category).

(what i'm trying to do eventually is to add in some extra links above the "filtering by" text. )

 

I thought i'd do an initial test to see if I could get some code applied to the page (i.e just changing the background colour of the block). 

But it seems like something is happening when I try to apply the code to this page.  My code is super simple (see below)...

<script>
const filteredView = document.querySelectorAll("div.sqs-events-collection-list")
  
filteredView.style.backgroundColor = '#000000'
  
</script>

However, when I check the console, everything I try to set just keeps coming up as "undefined". 

 

Does anyone know if there's something that blocks scripts on category pages? or perhaps there's something i'm missing!

 

i've tried adding the script to both the footer and header injection... 

 

site URL https://ellipse-krill-97td.squarespace.com/programme?category=Event and pw: CG

 

any help or advice appreciated!

You used querySelectorAll, it return a list of element, use querySelector instead