SOLVED: Event in Repeater Occurring Across All Items Instead of Targeted Item Only

Ask the community
,
1

I found my mistake seconds after posting this. But, I will leave this up incase others can benefit. It was the $item conundrum. I had not seen that I did not label the box as $item.
This…

const repeatedDetailBox = $w('#detailBox');

Needed to be this…

const repeatedDetailBox = $item('#detailBox');

Original Post:
I can’t see the forest for the trees. In my repeater I have a button that toggles a box (detailBox) with “more detail” about an event. The onClick event should only expand the box in the selected item, not all of the similar detailBoxes in all the items in the repeater. I am using the $item reference which would typically be the reason this would have created an event that affected all items (I think). I have successfully done this type of event in a repeater in the past. In fact, a different version of this was working until this morning when I changed my icon and rewrote the code. I may be missing something so obvious simply because I have been looking at this too long. Can you see my mistake and help me? Thank you.

Repeater shown below. Button with arrow (detailButton) should cause the detailBox to expand only in the item where the button was clicked. But clicking any detailButton expands the detailBox in ALL items.

Code:
This is a snippet from the larger code. I have highlighted the part I think needs work.

$w.onReady(function () {
  $w("#varRepeater").onItemReady(($item, itemData, index) => {
    if (itemData.home === true) {
    $item("#ishome").text = "vs. "
  }
  else {$item("#ishome").text = "@ "}

 const repeatedLocationName = $item("#locationName");
 const repeatedAddress = $item("#address");
 const repeatedDescription = $item("#description");
 const repeatedDetailButton = $item("#detailButton");
 const repeatedDetailBox = $w('#detailBox');

//Populate location name and address elements
 repeatedAddress.text = itemData.location;
 repeatedLocationName.text = itemData.locationName;

//Show theme/description of game if there is one
 if(!itemData.description) {
   repeatedDescription.collapse();
 }
 else (repeatedDescription.expand())

//Detail Button
repeatedDetailButton.onClick((event) => {
  if(!repeatedDetailBox.collapsed) {
    repeatedDetailBox.collapse();
  }

  else {repeatedDetailBox.expand();
  }

} );

#repeater,#items,#$item,event,#event_handler,

2

Your probllem could be the following CODE-LINE…

const repeatedDetailBox = $w('#detailBox');

You even could solve your problem by your own, just taking a closer look onto the name you gave your BOX-ELEMENT.

What is the name of your BOX ??? Exactly, it is —> repeatedDetailBox.
So what’s so strange or special with that name???

Exactly —> repeatedDetailBox !!! (You already have any idea?)

Exactly → $w(‘#detailBox’); <— What’s wrong here?

  1. When do you use → $w ???
  2. When do you use → $item ?

Your good coding-syntax saves your own life

3

Yes, thank you. My eyes were seeing what they wanted to/expected to see. I thought I saw $item(‘#detailBox’) when it was $w(‘#detailBox’). As soon as I wrote this post I went back and saw the mistake. I really appreciate this forum. I have learned so much here. Thank you!

4

Another mistake found here…
else ( repeatedDescription . expand ())
…never use this one…

always use this one…

else {repeatedDescription.expand();}
5

Ah! Stupid mistake. I know better. Time to walk away from the computer before I weave a tangled web from exhaustion. Thank you…again. Apparently I am only running on 3 cylinders.

6

Maybe, this will work again…

$w.onReady(function () {
    $w("#varRepeater").onItemReady(($item, itemData, index) => {
        if (itemData.home === true) {$item("#ishome").text = "vs. ";}
        else {$item("#ishome").text = "@ "}

        const repeatedLocationName = $item("#locationName");
        const repeatedAddress = $item("#address");
        const repeatedDescription = $item("#description");
        const repeatedDetailButton = $item("#detailButton");
        const repeatedDetailBox = $item('#detailBox');

        //Populate location name and address elements
        repeatedAddress.text = itemData.location;
        repeatedLocationName.text = itemData.locationName;

        //---Show theme/description of game if there is one
        if(!itemData.description) {repeatedDescription.collapse();}
        else {repeatedDescription.expand();}
        
        //---Detail Button
        repeatedDetailButton.onClick((event) => {
            if(!repeatedDetailBox.collapsed) {repeatedDetailBox.collapse();}
            else {repeatedDetailBox.expand();}
        });
    });
});