How to change box color for different word

Discussion Ask a question
,
1

I’m making a used equipment trade place where others can list products. Now I ran into the problem that I would like to have different background colors (sold, bought, exchanged) for the notification boxes, because otherwise it is difficult for the browser to distinguish the type of notification.

So I now have the code below in the test, which I found somewhere in the forum’s cache, but it doesn’t work at all, so this is probably just a waste of time


$w.onReady(function () {
    $w("#propertiesRepeater").onItemReady(($item, itemData, index) => {
        let state = $item("#text27");
        if (state.text === "sold") {
            $item("#box11").style.backgroundColor = "#13d120"
        } else if (state.text === "bought") {
            $item("#box11").style.backgroundColor = "#d11313"
        } else if (state.text === "exchanged") {
            $item("#box11").style.backgroundColor = "#c4e80e"
        }
    });
})

So, could someone help a beginner in solving the code?

2

First of all → i do not see any coding which tells me that the REPEATER is getting filled with data! → that means → that you are using a → DATASET <—.

But if you are using a dataset → where is your $w(‘#dataset1’).onReady(()=>{…}); CODE-PART ?

So, already one part missing inside of your code.

The ID of your REPEATER is → ‘propertiesRepeater’ ???

You have a —> ‘text27’ (whatever it is) inside of your repeater ?

Please show your setup on a pic.

  1. REPEATER?
  2. Text-box (or input-box) ?
  3. and your → box11 ←
1 Like
3

The DATASET thing was what was missing. When I added it, everything started working.
SO A THOUSAND THANKS AGAIN.

WORKING CODE BELOW

$w.onReady(function () {
    $w("#propertiesDataset").onReady(() => {//HERE WAS THE SOLUTION TO THE PROBLEM
        $w("#propertiesRepeater").onItemReady(($item, itemData, index) => {
            let state = $item("#text27");
            if (state.text === "Ostetaan") {
                $item("#status").style.backgroundColor = "#13d120"
            } else if (state.text === "Myydään") {
                $item("#status").style.backgroundColor = "#d11313"
            } else if (state.text === "Vaihdetaan") {
                $item("#status").style.backgroundColor = "#c4e80e"
            }
        });
    })//and here
})

And here below is a picture of the working page that I have built and the publication will probably be next week. They are in Finnish, but you can guess from the difference in colors that what I got was edited.

11.02.2024_18.51.38_REC
11.02.2024_18.51.38_REC1033×741 258 KB

And so the first ever on this WIX platform and in a couple of projects I was only helping, so I’m quite a beginner.

2 Likes
4

Well done, exactly like i expected it to be :blush:

Your starting code is always…

$w.onReady(function () {
    $w("#propertiesDataset").onReady(() => {
    
    });
});

If you are using a DATASET.

5

I’ve never used Javascript or any other code before, so the 2 months I’ve been making these pages have been really educational. But apparently even the old one is learning and can’t do anything but praise how good a platform this wix is.

1 Like