Jump to content

Formatting Color: Problem with element.innerHTML on Load

Recommended Posts

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) {
                element.style.cssText = 'color: #2F5597; font-weight: normal';
            else {
                element.style.cssText = 'color: #FF9900; font-weight: bold';
I really hope that someone can help. Many thanks in advance.

MDMR ThreshHolds.js

Link to comment
Share on other sites

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)  ...


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...