Formatting Color: Problem with element.innerHTML on Load

[Lynda]

I have a problem with my script and I am hoping that someone can easily tell what's happening. When it executes on load, it returns everything in it's .innerHTML value and the rest of the script logic fails: 

When I requery the datapage by applying Search filters, it somehow corrects it's self and functions as desired.

Script: Partial here; Full script attatched

//Define your Goal ThreshHolds

var CalorieGoal = [@Calories]*[@ThreshHoldCalc#];

var CarbsGoal = [@Carbs]*[@ThreshHoldCalc#];

var ProteinGoal = [@Protein]*[@ThreshHoldCalc#];

var SodiumGoal = [@Sodium]*[@ThreshHoldCalc#];

var SugarsGoal = [@Sugars]*[@ThreshHoldCalc#];

var PotassiumGoal = [@Potassium]*[@ThreshHoldCalc#];

var PhosphorousGoal = [@Phosphorous]*[@ThreshHoldCalc#];

var FatsGoal = [@Fat]*[@ThreshHoldCalc#];

var FiberGoal = [@Fiber]*[@ThreshHoldCalc#];

 

var MyLabel = "Calories = ";

var MyColorBlue = "Color = Blue";

var MyColorOrange = "Color = Orange";

var MyGoal = "Goal = ";

var MyValue = "Value = ";

 

document.addEventListener('DataPageReady', function(event) {

    //Define your columns

    const CaloriesField= document.querySelectorAll('td:nth-child(5)');

    const CarbsField= document.querySelectorAll('td:nth-child(6)');

    const ProteinField= document.querySelectorAll('td:nth-child(7)');

    const SodiumField= document.querySelectorAll('td:nth-child(8)');

    const SugarsField= document.querySelectorAll('td:nth-child(9)');

    const PotassiumField= document.querySelectorAll('td:nth-child(10)');

    const PhosphorousField= document.querySelectorAll('td:nth-child(11)');

    const FatsField= document.querySelectorAll('td:nth-child(12)');

    const FiberField= document.querySelectorAll('td:nth-child(13)');

 

    CaloriesField.forEach(element => {

        if (element.innerHTML != '') {    

            if (element.innerHTML < CalorieGoal) {

                console.log(MyLabel,element.innerHTML,MyGoal,CalorieGoal,MyColorBlue);

                element.style.cssText = 'color: #2F5597; font-weight: normal';

                }

            else {

                console.log(MyLabel,element.innerHTML,MyGoal,CalorieGoal,MyColorOrange);

                element.style.cssText = 'color: #FF9900; font-weight: bold';

                }

            };

        });

 

I really hope that someone can help. Many thanks in advance.

 

Lynda

MDMR ThreshHolds.js

[Volomeister]

Hi @Lynda

Could you share a link to this DataPage for more context?
 

[Lynda]

I sent you a message on friday. Any luck?

 

Lynda

[Volomeister]

Hi @Lynda

It looks like on initial load, element.innerHTML runtime value contains an additional temporary HTML markup <input type="hidden" name="Calories$Anchor" id="Calories$Anchor" value=""> that is being removed after. So your if else condition always defaults to else on initial load.

Can you try substituting everywhere element.innerHTML with element.innerHTML.replace('<input type="hidden" name="Calories$Anchor" id="Calories$Anchor" value="">','')
for example
 

... if (element.innerHTML.replace('<input type="hidden" name="Calories$Anchor" id="Calories$Anchor" value="">','') < CalorieGoal)  ...

 

[Lynda]

Worked like a charm! Thank you sooooo much!

Lynda