Trouble implementing JS inside a collection item

Design help Custom code
1

Hey Wonderful Webflow Community.

I’m struggling to understand the implementation of JS inside of a collection list and specifically inside of each collection item.

My end goal is to exact the address field from each CMS item so I can create an array with them, and eventually place all the addresses as markers on a google map.

Before I can get to that I’m simply trying to implement some jQuery inside an embed which is inside a collection item, however, it’s not working despite my best efforts.

here is the code I’m using inside each collection item: (to simply change a text field)

<script>
$('.button-copy').on('click', function() {
  $('.dynamic-text').text('example text');
});
</script>

But I can’t even get that to work.
Any help would be much appreciated!

Thank you in advance.

Here is my site Read-Only:
https://preview.webflow.com/preview/big-meal-share?utm_medium=preview_link&utm_source=designer&utm_content=big-meal-share&preview=407eaa2f5038d9028ed6c42787010027&pageId=6361b85e37b9c930d13cbd03&workflow=preview

2

Hey Will, we can’t see the code in your post, put 3 backticks before, and 3 after to create a code block in the forum posts.

In general jquery works best in the </body> code area, because the jQuery library reference is at the end of your page. Trying to use jQuery inside a collection list will probably generate errors.

3

A best-practice here is to avoid script inside of your collection list, you really don’t need it there and it’s more challenging to debug.

Instead, in your collection list, just make the data you want available.
One way is to drop a code embed there with a custom element, like this;

<data item="address" value=" PUT THE PURPOSE ADDRESS FIELD HERE "></data>

Then in your </body>, something like this.

<script>
$(function() {

$("data[item=address]").each(function() {
const addr = $(this).attr("value");
// add addr to your array
});

});
</script>

^ typed in a cafe, so expect syntax errors

4

Hey Michael,

Thanks so much for explaining that! Makes so much sense :slight_smile:
I will do my best to implement your code and let you know how I go,

Thanks again,
Will