Changing the box color with a condition

Ask the community
,
1

Hello!

I’ve searched the entire forum for something that helps me, but I couldn’t find. I’m trying to write a code that changes the box color depending on the text that is in the title.
The box is inside a repeater, and when I try to use the one that I wrote, it changes all of them :tired_face:.

$w.onReady(function() {
    $w("#repeaterLastTrans").onItemReady(($item, itemData, index) => {
        if ($w("#textStatusLastTrans").text === "Pending") {
        $item('#boxStatusLastTrans').style.backgroundColor = "#8EE6A6";
        }
        if ($w("#textStatusLastTrans").text === "Activated") {
        $item('#boxStatusLastTrans').style.backgroundColor = "#FFFFFF";
        }
       });
});

Thanks in advance.

2

Hi! Based on your code, it looks like you’re on the right track, but there’s a small issue in the way you’re selecting the box element inside the repeater item.

Try out new efficient code solution:

$w.onReady(function() {
    $w("#repeaterLastTrans").onItemReady(($item, itemData, index) => {
        const textStatus = $item("#textStatusLastTrans").text;
        switch(textStatus) {
            case "Pending":
                $item("#boxStatusLastTrans").style.backgroundColor = "#8EE6A6";
                break;
            case "Activated":
                $item("#boxStatusLastTrans").style.backgroundColor = "#FFFFFF";
                break;
            default:
                $item("#boxStatusLastTrans").style.backgroundColor = "transparent";
                break;
        }
    });
});

This code uses a switch statement to check the value of the “textStatus” variable, which contains the text of the title. The switch statement sets the background color of the box based on the value of “textStatus”. The “default” case is used to set the background color to transparent if the title doesn’t match any of the specified values. Good luck!

3

Thanks for your reply, bamuu!

Unfortunatelly, it dind’t work either. I think it’s because the title is connected to a database and must get the value from there.

4

You can fix it self or i need give you code? :slight_smile:

5

I tried with something different, but it didn’t work as I expected. I appreciate if you could give me an option to try.

6

I am trying to do the same. Have you found how to get this working?

7

Figured it out. You can use itemData to find the data from your dataset. Be sure to refer to the id of the data you are retrieving.

$w.onReady(function() {
    $w("#repeaterLastTrans").onItemReady(($item, itemData, index) => {
        const textStatus = itemData.textStatusLastTrans;
        switch(textStatus) {
            case "Pending":
                $item("#boxStatusLastTrans").style.backgroundColor = "#8EE6A6";
                break;
            case "Activated":
                $item("#boxStatusLastTrans").style.backgroundColor = "#FFFFFF";
                break;
            default:
                $item("#boxStatusLastTrans").style.backgroundColor = "transparent";
                break;
        }
    });
});