I have a seemingly pretty simple requirement that I cannot figure out.
Using Wix Code, I need to format a text string inside a repeater with two different colors.
I want the repeated sentence below to be black with the exception of the word "red", which I want to be red.
$w("#repeater1").onItemReady( ($item, itemData, index) => { repeatedText = $item("#text225");
$item("#text225").text = "The car is red." $item("#text225").html=
"<span style='color:#000000; ' >" + $item("#text225").text.substring(0,11) + "</span>" +
"<span style='color:#FF1F00; ' >" + $item("#text225").text .substring(11,15) + "</span>";
repeatedText.text = $item("#text225").text;
}
When I run this, it appears that only the first <span> is being used and the entire sentence is black. If I switch the order of the colors, then the entire sentence is red. I have also checked the substring parameter here by commenting out the first and then the second <span> and the repeater displays correctly as either "The car is" or as "red.", respectively as it should, but only the color from the first <span> being used.
One other point in terms of full disclosure...I have $w("#repeater1") (NOT the text field inside the repeater) tied to a dataset. It appears to be displaying the number of items in the data set correctly as well as overwriting the text field of #text225 correctly with "The car is red."
I am probably missing something really simple here, but I just cannot figure it out. Any advice from a Wix HTML guru on how to pull this off would be most appreciated!
Thanks,
Jay
Hello Jay
Try using slice method instead; and you don't have to set the repeater text to the value of text225 because they are the same item. try the following code, it should work this way :
$w("#repeater1").onItemReady( async ($item, itemData, index) => { const repeatedText = $item("#text225"); $item("#text225").text="the car is red"; $item("#text225").html="<span style='color:#000000; ' >"+ $item("#text225").text.slice(0,11) + "</span>" + "<span style='color:#FF1F00; ' >" + $item("#text225").text.slice(11,15) + "</span>"; // repeatedText.text=$item("#text225").text; // not needed console.log( repeatedText.text); } );Best
Massa
Massa,
That worked perfectly...thank you for the great suggestion!
Jay