Change CSS by Javascript

Community Usage questions
,
1

Hi all,
I have this simple script:

var n = (get('MainScript').toFixed(3)*1000)
if (n !== 0) {
setInterval(function () {
n=n-100
var date = new Date(0)
date.setSeconds(((n/1000)).toFixed(0))
var timeString = date.toISOString().substring(11, 19);
set('timeDisplay', timeString);
set('messageArea', "");

            // tempo 0 esce dal loop
          if (n <= 0) {
            clearInterval();
            set('timeDisplay', "--:--:--");
            set('messageArea', 'Completed!');
          }
          
        }, 100)

}

else {
clearInterval();

set('messageArea', 'Stopped by User or 0 time cue')
set('timeDisplay', "--:--:--");
set('currentCue', "None...");

}

How can I change text color of "timeDisplay" when "n"<somevalue?

Thankyou

Cristiano

2

Hi,

In the widget timeDisplay, you need to create a VAR in the CSS for the text color. Something like this below:

:host {
  color: VAR{textColor, white};
}

Then in the other widget that you have your script above in, add the following lines to change the VAR in the timeDisplay widget.

if (n < 10) {
    // setVar(widgetId, varName, value)
    setVar("timeDisplay", "textColor", "red")
}

Cheers,
DMDComposer

3

Thank you so much!

Perfect!

1 Like