Text element selector works once only

Ask the community
, ,
1

Hello,

I have been trying to code using VeloJS recently and I have found a weird issue that cannot seem to be resolved no matter how much I tried to debug it.

The only hint I have is that this line:

let t = $w("#text21").text

The issue is that the variable t is supposed to store a Title field’s value, which is generated into a text element, in order to recognize which ITEM we are currently at.

Full code:

let t = $w("#text21").text;

    const tobj = {
        "Falon" : ["#8F715F", "#FFEFDF"],
        "Gris" : ["#D2D2D2", "#4A4442"],
        "Noir" : ["#393939", "#D8D8D8"],
        "Noir V" : ["#222222", "#ECBF92"],
        "Rosé" : ["#FFDDBC", "#5E4436"],
        "Or V" : ["#C1A66A", "#F5EBD8"]
    };

    // convert object to key's array

    const keys = Object.keys(tobj);
    console.log(keys);

    // iterate over object
    
    
    keys.forEach((key, index) => 
    {
        console.log(t + ":" + key);
        console.log(index);
        if(t === key)
        {
            //console.log(1245);
            $w('#button5').style.backgroundColor = tobj[key][0];
            $w('#button5').style.color = tobj[key][1];
        }
    });

Console logs:
NOTE: the first item is returning exactly what I need, the condition, in this case, is the item named “Noir”, which is the trigger to the button changing in style, and the console logging that the stored variable “t” is EQUAL to “key”, the key represents each key in our “tobj” object.

Noir:Falon

0

Noir:Gris

1

Noir:Noir

2

Noir:Noir V

3

Noir:Rosé

4

Noir:Or V

5

First item working fine.

Whenever I try to request the other items, it keeps returning this weird “1” from the stored variable “t” which is exactly the issue that I cannot seem to fix:

1:Falon

0

1:Gris

1

1:Noir

2

1:Noir V

3

1:Rosé

4

1:Or V

5

What do you think is not letting that variable “t” store the item’s Title field on each new page load?

2

Hello, I haven’t received any reply to this error, it’s been a week, any help please?

3

Hi Aymen,

How is t defined?
$w ( “#text21” ). text ; When is it fille with a text and how

The code you showed, how is it used ?

Kind regards,
kristof

4

Hello Kristof,

#text21 is connected to the content manager, the item connected from the collection, is referring to the “Title” of that item, and it gets generated into the element of #text21, once that is generated, the code is supposed to compare the content text of #text21, using $w(“#text21”).text; with the Titles inside my “tobj” object, if the the current title of the item we are currently in matches the generated text, it changes the UI’s color

5

so the text21 can have the text falcon , gris, noir, etc.

can you show the content manager of the collection it is linked with.
Use some images so i can understand it better.

This way i might be able to find where it goes wrong.

also if you have any other code that might be interfering, also post it.

Kind regards,
Kristof.

6

As you can see in the screenshot, the highlighted item “Title” is the generated content inside of #text21.

That’s the full code btw, it was used inside the default “onReady” event that is pre-written in VeloJS

P.S: Basically, the code is being executed on the first WATCH that gets accessed from the full ITEM’s page, and it works perfectly, once you try to access another WATCH item, the code no longer does its job, and it keeps returning “1” from text21.text instead of returning the generated title itself, which doesn’t make any sense

692×436 49.6 KB

7

Let me explain this a bit more. This is the first execution, the first word “Noir” from the left is the text element that generates the “Title” from the collection of data. The first code execution does what it is supposed to do which is comparing the generated “Title” with the titles within the “Object” as you can see:

Noir:Falon  

0  

Noir:Gris  

1  

Noir:Noir

The problem is whenever I switch to the other items, the text element does in fact generate the “Title”. However, whenever It retrieves the text, it STRANGELY returns “1” which I have no IDEA where it is coming from, here it is:

1:Falon  

0

1:Gris  

1

1:Noir

The problem is basically in the SECOND execution of the code which happens once you enter another item, why exactly does the $w(“#text21”).text return 1 whenever it is retrieved on the other items after the first item was retrieved successfully?

And obviously when you compare a string number with another string the "if (t === key) won’t be true, which is basically not gonna let the UI’s color change, I have tried changing the text element into an ID instead, and it did the same exact thing, the second execution returned 1, I tried my best to see where the problem is but no clue. Please help!

8

@aymenhoualefd
What you should do is
Instead of adding all that code to the onready, add it to its own function like

function changeButtonTheme(){
let t = $w("#text21").text;

    const tobj = {
        "Falon" : ["#8F715F", "#FFEFDF"],
        "Gris" : ["#D2D2D2", "#4A4442"],
        "Noir" : ["#393939", "#D8D8D8"],
        "Noir V" : ["#222222", "#ECBF92"],
        "Rosé" : ["#FFDDBC", "#5E4436"],
        "Or V" : ["#C1A66A", "#F5EBD8"]
    };

    // convert object to key's array

    const keys = Object.keys(tobj);
    console.log(keys);

    // iterate over object
    
    
    keys.forEach((key, index) => 
    {
        console.log(t + ":" + key);
        console.log(index);
        if(t === key)
        {
            //console.log(1245);
            $w('#button5').style.backgroundColor = tobj[key][0];
            $w('#button5').style.color = tobj[key][1];
        }
    });
}

Then add the function in your onready

$w.onReady(function () {
changeButtonTheme()
});

Now when the event happends that the text21 changes, also run the function.
But after text21 has changed.

I used a button for it that changes the text21 to “Falcon”

export function button6_click(event) {

    $w("#text21").text = "Falon"
    changeButtonTheme()
}

Hope this works for you.

Kind regards,
Kristof