Random Colorful letters

Question

I have this code:

<div  id="list" rows="10"></div>
<script>
 $(function() {
   setTime();
   function setTime() {
       $.ajax({
            url : "../abc.php",
            dataType: "text",
            success : function (result) {
                $("#list").html(result);
            }           
        });
      var date = new Date().getTime();
      setTimeout(setTime, 3000);
      $('#list').html(result);
      //Here  should call a function to color all the words of the div
   }


    });
</script>

    });

I'm trying to color all letters every 3 seconds using the setTime () function.

Note: I'm trying to color each letter of a word, in other words, each letter will have a color

Like:

https://i.imgur.com/Tw2Q58U.png

I tried with this code, but it changes the color of the entire div(The div stay with only one color):

var randomColor = Math.floor(Math.random()*16777215).toString(16);
document.getElementById('list').style.color = '#' + randomColor

Answer 1

You would have to break your text into children spans and do the coloring on them.

function colorElement(element) {
  var randomColor = Math.floor(Math.random()*16777215).toString(16);
  element.style.color = '#' + randomColor;
}

function splitElement(element) {
  var text = element.innerText;
  element.innerText = '';
  var chars = text.split('');
  for(var ch of chars) {
     var charSpan = document.createElement('span');
     charSpan.innerText = ch;
     element.appendChild(charSpan);
  }
}

function randomColor() {
   var result = document.querySelectorAll('span span');
   for(ele of result){
      colorElement(ele);
   }
}

var ele = document.getElementById('myText');
splitElement(ele);
setInterval(function() {
   randomColor();
},500);

<div>
  <span id="myText">Disco Text</span>
</div>