Add EventListener

Ask the community
,
1

I have a number of boxes within a container and want to highlight a box when its clicked but unlight the box when the others are clicked. I don’t want to set the background style manually for every box under a onClick event because I may have 30 boxes and it’s not scalable.

I think the best approach would be to add an event listener and set a global variable equal to the element id that is clicked. However, I am not sure how to use this in wix code. Is there any documentation?

2

All you need is a ----> REPEATER → this element will do your wished function for you.

3

Can you elaborate on that? I don’t see how its much different with a repeater because for any onClick functions it must be done for each item within the repeater. There is no onClick event handler for the entire repeater that I can see in the documentation.

Repeater - Velo API Reference - Wix.com

4

Hi, SW.

Have you already checked this solution?

$w.onReady( function () {
  $w("#repeatedContainer").onClick( (event) => {
    let $item = $w.at(event.context);
    let clickedItemData = $item("#myDataset").getCurrentItem();
  } );
} );

or

$w.onReady( function () {
  $w("#repeatedContainer").onClick( (event) => {
    const data = $w("#myRepeater").data;
    let clickedItemData = data.find(item => item._id === event.context.itemId);
  } );
} );

In this way, you can distinguish which container was clicked. And, probably clickedItemData contains clicked element’s itemId.

5

Correct! —> OneMoreTime already provided you some examples.

This was your comment…

I have a number of boxes within a container and want to highlight a box when its clicked

And surely you generated all your stuff → as fixed boxes on your page, which is surely not the best way to go. You always should try to create and generate your site as much dynamic (flexible) as possible.
The more you programm your site in DYNAMIC-WAY → the more → INTERACTIVE it will be at the end.

Try to work more with REPEATERS and DATABASES.
You will understans very quickly, why this way is a much better way ten working with hard-coded codes or static programmed pages.

6

This worked, I found the documentation to go with it in the repeater introduction. Thank you!

7

Got it, thanks for the tip on the repeater - it worked!