How to undo backgroundColor in repeater buttons?

Ask the community
,
1

I’m trying to add a repeater of buttons on my product page for size selection. As shown here:

The goal is to have the background color of the button indicate the option selected.

I can get it to work somewhat. So using the image above as an example, if I click on Large next, it works as needed. It always works when I click on a higher option.

The problem is when I click on a lower option, the higher option won’t change. If I go further and click on Small below, all three are selected.

I can’t for the life of me figure out why this is. Below is my code. Any suggestions?

export function sizeRepeater_itemReady($w, itemData, index) {

    $w('#sizeButton').label = itemData.description;  // button label to get populated with size options
 
    $w('#sizeButton').onClick( (event) => {         

        $w("#sizeRepeater").forEachItem( ($w) => {
 
            $w('#sizeButton').style.backgroundColor = "#ffffff" //RESET: after a button is clicked, change button backgrounds to white
        })
 
    $w('#sizeButton').style.backgroundColor = "#b6f3e8"; //update the selected option background to color
    $w('#productSize').text = $w('#sizeButton').label;

    })

}

Thanks!

1 Like
2

Hi There :raised_hand_with_fingers_splayed:

You need to set two different event handlers, an onMouseIn() event and an onMouseOut() event, inside each event change the background to the preferred style, example:

You want to change a button’s background color from black to white on hover, and return to when hover away.

$w('#button').onMouseIn(() => {
    $w('#button').style.backgroundColor = '#000000';
});

$w('#button').onMouseOut(() => {
    $w('#button').style.backgroundColor = '#FFFFFF';
})

Hope this helps~!.

3

Hi Ahmad!!
Sorry for this ~!
Can you check on here →
https://www.wix.com/corvid/forum/community-discussion/query-result-loop-query
Thanks~!

4

Will do …

5

Hi @ajithkrr and @imadit , I want to do this as well. The mouseIn and mouseOut doesn’t work for me, because that’s a hover interaction. I want the background color of a box to change when clicked in the repeater, and when a different repeater item is clicked, I want the first repeater item to return to the original background color.

Any ideas?