What's wrong with this repeater background color code?

Ask the community
,
1

I’m trying to change the background color of cells within my repeater that’s connected to a hex field in my database, but there seems to be a problem with my code.

$w.onReady(function () {
  $w("#Dataset").onReady(() => {
    $w("#Repeater").forEachItem( ($w, itemData, index) => {
      let color = itemData.hex;
    $w("#Container").style.backgroundColor = color;
    });
  });
});

Can anyone help?

2

ID of DATASET → “# Dataset” ? (sure?)
ID of REPEATER → “# Repeater” ? (sure?)

INSIDE-REPEATER → $item

Instead of forEach try this one…

$w("#Repeater").onItemReady(($item, itemData, index)=>{
   console.log(itemData);
   console.log(index);
   let color = itemData.hex; console.log(color);
   $item("#Container").style.backgroundColor = color;
});
3

Thanks, Ninja! For some reason, it’s not recognizing “.backgroundColor” – any idea why?

The link to my site is: https://www.regularsmusical.com/tickets

4

@misshazeljade
Which RESULTS do you get for all the 3 implemented console-logs ?
Can you show them (related to your issue)?
-itemData
-index
-color

some screenshots?

EDIT: Ok, already got the consoles…

All console-logs works…
console . log ( itemData ); ----> OUTPUT-working
console . log ( index ); ---------> Index = 0
console . log ( color ); ----------> Color = #00FFFFFF

752×213 7.52 KB

1) As i know a HEX-Color consists of 6-Digits not 8 ??? ( #ff0000 )
https://www.w3schools.com/colors/colors_hexadecimal.asp

754×180 6.21 KB

Try to inspect this first.

You have also the possibility to switch to RGB-Colors or even RGBA-Colors.

$item ( “#Container” ). style . backgroundColor = “rgb(255,100,75)”
$item ( “#Container” ). style . backgroundColor = “rgba(255,100,75,0.5)”

or doing a simple test with a static setted color like this…
$item ( “#Container” ). style . backgroundColor = “red”

If still not working —> Check the setted OPACITY of your button → must be 100%, either it won’t work.

If still not working → choose another button-type.