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 !
Important forum update
This forum is migrating to one unified Wix community forum starting July 26th, and will be read-only during the process.
Wishlist Page is the official platform for requesting new features. You can vote, comment, and track the status of the requested features.
@Jack Lai
Yes you can set many properties for text...
https://www.wix.com/code/reference/$w.Text.html
This is a challenge. If you see the element's HTML beforehand you will notice it has <span> 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 <p id="orderStateText"> element on my page:
changeTextColor('orderStateText', 'red');
Good luck.
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!
Something like this...
if (2+2 === 4){
$w("#myElement").style.color = "rgb(255,0,0)";
}