How Do You Change Text Color in just One Part of a Dynamic String?

Ask the community
,
1

What’s up, everyone. I’m proud to say that I’m finally getting the hang of this stuff. Thank you for the help so far. I’ve even started contributing some of what I’ve learned to the community. It’s good to give back.

Here’s my latest issue:

I have a dynamic string, created from several fields in a dataset. Specific users submit changes, which update each part of the string. But I’d like the last variable in the string to be a different color. I’ve tried a few solutions I found in this forum, but none have worked.

Here’s the line of code:

$w("#esdateandtime01").text = items[0].month + " " + items[0].day + ", " + items[0].hr + ":" + items[0].mn + " " + items[0].ampm + "  -  " + items[0].zone;

I tried using . . . , but that did not work. I’d like to stay away from DOM changes, too, as I’m hoping to keep my theme intact.

Are there any other solutions? I’m hoping for something inline.

2

Hello.

To apply HTML tags and CSS attributes, you have to use .html property instead of .text. In your case, it shoud be:

$w("#esdateandtime01").html = "<b>Bold Text</b>";

You can refer to our API here.

Good luck!

3

I understand what you’re saying, but I challenge you to adapt your solution to the last variable in the line of code above. The problem is preserving the variable. Wrapping the variable in quotes of any kind turns the variable into text, to include the , which also shows as text.

It doesn’t work!

I think I need escape characters to preserve the variables, but I’m not sure.

Any ideas?

4

Just noticed this post…

Use the .html property as Sam suggested in his comment. Try something like this:

$w("#esdateandtime01").html = items[0].month + " " + items[0].day + ", " +  "  - <span style='color: red'>" + items[0].zone + "</span>";

Last variable is displayed in red. I hope this helps.