Different style font color depending on different payload values from node red

Hi,
I have a node red template with html to show some payloads on a screen.

like:

<div style="font-family:direction; color:{{msg.payload.bits.toString(2)[31]==1 ? 'red' : 'white'}};">H</div>

The letter H is in collor red or white depending on the value msg.payload.bits.toString(2)[31]
That is working fine.

I made already:

<div style="font-family:direction ">{{msg.payload.bits.toString(2)[30]==1 ? "A" : " "}}{msg.payload.bits.toString(2)[29]==1 ? "J" : " "}}</div>

With bit30, I have “A” or space on screen or with bit29, I get “J” or space on screen…
We can’t have both at the same time.

Now I like to have the letter “A” depending of msg.payload.bits.toString(2)[30] in red or white color
or
the letter “J” depending of msg.payload.bits.toString(2)[29] in blue or white colorJ

I’am new in html-javascript and don’t know how to fix it.

This seems to be a continuation of your programming thread.

From a CSS point of view if you have 2 characters and you want them to have different colours then you need them each wrapped in a span.

e.g.

<div style="font-family:direction;">
  <span style="color:{{msg.payload.bits.toString(2)[30]==1 ? 'red' : 'white'}};">{{msg.payload.bits.toString(2)[30]==1 ? "A" : " "}}</span>
  
  <span style="color:{{msg.payload.bits.toString(2)[29]==1 ? 'blue' : 'white'}};">{{msg.payload.bits.toString(2)[29]==1 ? "J" : " "}}</span>
</div>

Of course you will need to check the code logic in the programming forum.

Thanks, that was perfect.

1 Like