Issue

This Content is from Stack Overflow. Question asked by amoon

how make : color the text, word by word, without click or hover
Coloring according to certain speed, can be define and change,

write a function to color a text, word by word.
We will provide one ful sentence, and your function will be called to color word by word, without mouse click or hover on the word

in Html css or javaScripts

Solution

You need to set all words inside div to span tag separately and to recursively call function until it is done. You can change speed to any number and it is in milisecond. The first word is instant changed to some color, but you can delay it too if you want.

const words = Array.from(document.querySelectorAll(".word"));
const speed = 1000;
let counter = 0;

const setColor = () => {
  words[counter].style.color = "red";

  words.map((word, index) => {
    if (index !== counter) {
      word.style.color = "initial";
    }
  });

  setTimeout(() => {
    if (counter < words.length) {
      setColor();
    } else {
      word.style.color = "initial";
    }

    counter++;
  }, speed);
};

setColor();

<h1><span class="word">Lorem</span> <span class="word">ipsum</span> <span class="word">dolor</span> <span class="word">sit</span> <span class="word"> amet</span>.</h1>

This Question was asked in StackOverflow by amoon and Answered by Nemanja2912 It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.