Change backgrounnd color of specific repeater items

Ask the community
,
1

I’m having trouble with

Changing the background color of repeater item by index

Working in
Wix Studio Editor in Dev Mode

What I’m trying to do
I am trying to use a repeater for navigating product media items and change the background color of a button on the repeater item thats index matches the currently selected index of media items. I have dynamially changed the background color of other similar items using the same code.

What I’ve tried so far

I’ve tried deleting the button and readding it in case it was an issue with component not the code and the background color still did not change. Ive also tried changing ihe background color of a container and tried setting the color to ‘black’ and ‘#000000’ and neither worked. I am assuming there is an error in my code since nothing else is having an impact.

    const handleMediaItems = ($item,itemData,index)=>{
      if(index === 0){
        $item("#media").style.backgroundColor = '#ffffff';
      }

      $item("#media").onClick(()=>{
        currentMedia = index;
        $w("#mainMedia").src = itemData.src;

        $w("#media").style.backgroundColor = "#000000";
        $item("#media").style.backgroundColor = "#ffffff";
      })
    }
    $w("#mediaRepeater").onItemReady(handleMediaItems)
    const mediaItemHandlerForButtons = (currentMedia) =>{
      $w("#mediaRepeater").forEachItem(($item,itemData,index)=>{
        if(index !== currentMedia) return;
        $w("#mainMedia").src = itemData.src;
        $w("#media").style.backgroundColor = '#000000';
        $item("#media").style.backgroundColor = '#ffffff';

      })
    }
    $w("#mediaRepeater").data = thisProduct.mediaItems.map(obj => ({
      ...obj, // Spreads existing properties of the object
      _id: obj.id // Adds the new property
    }));

    $w("#nextMediaButton").onClick(()=>{
        if(currentMedia  ===  thisProduct.mediaItems.length - 1 )return; 
        currentMedia ++;
        $w("#mainMedia").src = thisProduct.mediaItems[currentMedia].src;
        mediaItemHandlerForButtons(currentMedia)

    })
    $w("#previousMediaButton").onClick(()=>{
        if(currentMedia === 0) return;

        currentMedia --;
        $w("#mainMedia").src = thisProduct.mediaItems[currentMedia].src;

        mediaItemHandlerForButtons(currentMedia)
    })