Change color of words one by one in text box

Ask the community
,
1

Hi, I am looking to change the color of the words in a text box, one by one (If the sentence is “The dog is Max”, The will change to blue, then change back to black, then dog will change to blue, then change back to black, and so forth.). Does anyone know how to do so?

2

You can try something like:

cons intervalInMs = 300;//300 milliseconds
const text = 'The dog is Max';
const words = text.split(' ');//splits by space char;
let inx = 0;
let isColored = false;
function styleText(){
 if(!isColored){
  $w('#text1').text = text;
 } else {
  const newArr = words.map((e,i) => i === inx ? '<span style="color:blue">' + e + '</span>' : e);
  $w('#text1').html = `<p>${newArr.join('&#32;')}</p>`;
 }
}
$w.onReady(() => {
 setInterval(() => {
  if(!isColored){inx = (inx + 1) % words.length;}
   styleText();
   isColored = !isColored;
}, intervalInMs)
})