The text's colour can change in code?

Ask the community
,
1

I want to create a function to change the text’s colour, so i can call this function to change the text colour at some condition. Is it possible ?
THANK YOU !

2

Something like this…

if (2+2 === 4){

$w(“#myElement”).style.color = “rgb(255,0,0)”;

}

3

I find that only element like input and Text Botton have .style.color, but element text dose not has style.color . Thank you !

4

@laizhihong88
You can change text elements with .html function, for example…

$w(" #text41 ").html = <p style = "color:red"> ${$w(" [#text41](https://www.wix.com/code/home/forum/search/posts%3Fquery=.num.text41) ").text}</p>; }

5

@mikemoynihan99
Yes your way is working, the color has changed to red. But the text size and type has changed also. Can i keep the size and type that i set before ?

6

@laizhihong88
Yes you can set many properties for text…

7

I wrote up some code that not only changes the color but preserves all other configured aspects of the font. I needed a generic way to display error messages and regular feedback as needed. The text widget on my page specified a red color - you may need to change the color on the text widget in order for this to work.

import {session} from 'wix-storage';
...

// ------------------------------------------------------------------------
// Functions related to showing status messages
// ------------------------------------------------------------------------
//
// Invoke this function in $w.onReady(), eg., registerMessageWidget("error") for text widget $w("#error")
//
export function registerMessageWidget(widgetname) {
let widget = $w("#" + widgetname);
let text = widget.text;
let start = widget.html.search(text);
let color = widget.html.substr(0, start).search(/color/i)+7; // +7 = "color:#"
session.setItem("msgspecs", JSON.stringify({
widgetname: widgetname,
prefix1: widget.html.substr(0, color),
origcolor: widget.html.substr(color, 6), // Original color
prefix2: widget.html.substr(color+6, start-color-6), // +6 = "FFFFFF"
suffix: widget.html.substr(start+text.length)}));
}
function changeText(msg, color) {
let msgspecs = JSON.parse(session.getItem("msgspecs"));
let newcolor = color ? color : msgspecs.origcolor;
$w("#" + msgspecs.widgetname).html = msgspecs.prefix1 + newcolor + msgspecs.prefix2 + msg + msgspecs.suffix;
$w("#" + msgspecs.widgetname).show();
}
export function showError(msg) {
changeText(msg);
return msg;
}
export function showHappy(msg) {
changeText(msg, "000000");
return msg;
}
export function hideMessage() {
let msgspecs = JSON.parse(session.getItem("msgspecs"));
$w("#" + msgspecs.widgetname).hide();
}
// ----------------------------------------------------------------------
// End of functions related to showing error messages
// ----------------------------------------------------------------------

So what I do is parse the html, extract the bits leading up to the color spec, then reconstruct the HTML when I wish to display the message either in the original color (showError) or in black font (showHappy).

Enjoy!

1 Like
8

This is a challenge. If you see the element’s HTML beforehand you will notice it has inside the text and it’s not easy to modify the HTML safely.

Unfortunately I don’t know a better way to have same place on the Wix form to show message based on status, so good condition text would be green & error would be red.

NOTE: this code currently ASSUMES it is added ‘style’ to each tag but it also adds ‘style’ to the end of each tag and anywhere the HTML has ‘>’ in it.

Here is a (somewhat dangerous) function I wrote for handling this. It is working for me in my tests:

function changeTextColor(inputId, color) {
	let textInput = $w('#' + inputId);
	let realText = textInput.text;
	textInput.text = '    ';
	var html = textInput.html;
	let newHtml = html.replace(/>/g, ' style="color: ' + color + '">');
//	console.log('new ' + inputId + ' HTML = ' + newHtml);
	textInput.html = newHtml;
	textInput.text = realText;
}

Here is call I made to modify

element on my page:

changeTextColor('orderStateText', 'red');

Good luck.