Changing font color based on condition

Ask the community
,
1

There has been a similar post in the past, but I still need a little help because I’m not that experienced with javascript. I’m trying to change the font color based off the score, here’s what I have right now on one page of the website.

    let score_comp = Math.round(((score-557)/557)*100);
    
    let comparison= "abc";
    let textcolor = "#FFFFFF"
        if(score_comp<0){
            comparison = "Lower than average American by " + Math.abs(score_comp) + "%";
            textcolor = "#26D454";
        } else if (score_comp>0){
            comparison = "Higher than average American by " + score_comp + "%";
            textcolor = "#FF4040";
        } else {
            comparison = "Equal to that of the average American." ;
        }
local.setItem("SChouse_comparison", comparison);
local.setItem("SChouse_color", textcolor);

Then in the main page where the color should be displayed

$w("#" + section + "comp").text = local.getItem("SC" + section + "_comparison");
    if( $w("#" + section + "comp").hidden ) {
        $w("#" + section + "comp").show();
    }
if ($w("#" + section + "comp").visible) {
        let value = $w("#" + section + "comp").text;
        let color = local.getItem("SC" + section + "_color");
            $w("#" + section + "_comp").html = "<p style = 'color: " + color + ";'>" + value + "</p>";
    }

The problem right now is that the text is displaying and everything else is working, but it always appears as white and does not change colors. Thanks!

2

Why you do this…??? (do you have more of stored keys in wix-storage)?

$w("#"+section+"comp").text=local.getItem("SC"+section+"_comparison");

Why not just → 

let comparison = local.getItem("SChouse_comparison");
let txtColor = local.getItem("SChouse_color");

One hint/tip → Try to use more SHORTEN variables, do not create long variable-names → it will let explode your code. What do i mean?

Here an example:
Why this…(do you have more of similar/different keys to be stored in the wix-storage)?

local.setItem("SChouse_comparison",comparison);

If not, than just do the following…

local.setItem("comparison",comparison);

The same for… (instead of…)

textcolor

Do…

txtColor

Yes these are very little detailed improvements, but when you will perhaps handle bigger codes in your future, this will keep a good overview of your code.

Also try to find a basic systematic definition rule for all of your variables, constants and so on…

What do i mean?

Here you use this method → score_comp
And here another → textcolor
A third one could be —> textColor
A fourth systematical one could be → txtColor
… and so on.

What do i want to tell you?
Try to find your own unique fixed coding style → this will upgrade your own CODE-readability → because you will have a systematical written code.

And for your color problem…

let size = 10px
let color = local.getItem("SChouse_color");
let text = "My text here...."

$w('#element').html=`<p style="color:${color}; font-size:${size}">${text}</p>`;
3

Yes, I forgot to specify that there are other sections. I definitely see what you mean about the variables. Thanks for your help!