Random Colorful letters












6















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










share|improve this question

























  • It seems you'll need <span> elements for each letter you'd like to color.

    – ggorlen
    Jan 18 at 5:44











  • what's CC_List1 can you show some html

    – priyanshi srivastava
    Jan 18 at 5:45











  • CC_List1 are incorrect, the correct is list. I will edit the post, sorry.

    – Bro Faz Sol
    Jan 18 at 5:48






  • 2





    I don’t think you can apply style to text nodes; only on elements. I suppose you can break apart the letters into individual spans...

    – alans
    Jan 18 at 5:48
















6















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










share|improve this question

























  • It seems you'll need <span> elements for each letter you'd like to color.

    – ggorlen
    Jan 18 at 5:44











  • what's CC_List1 can you show some html

    – priyanshi srivastava
    Jan 18 at 5:45











  • CC_List1 are incorrect, the correct is list. I will edit the post, sorry.

    – Bro Faz Sol
    Jan 18 at 5:48






  • 2





    I don’t think you can apply style to text nodes; only on elements. I suppose you can break apart the letters into individual spans...

    – alans
    Jan 18 at 5:48














6












6








6








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










share|improve this 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







javascript html






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 18 at 6:54









ScrapCode

1,03031327




1,03031327










asked Jan 18 at 5:41









Bro Faz SolBro Faz Sol

324




324













  • It seems you'll need <span> elements for each letter you'd like to color.

    – ggorlen
    Jan 18 at 5:44











  • what's CC_List1 can you show some html

    – priyanshi srivastava
    Jan 18 at 5:45











  • CC_List1 are incorrect, the correct is list. I will edit the post, sorry.

    – Bro Faz Sol
    Jan 18 at 5:48






  • 2





    I don’t think you can apply style to text nodes; only on elements. I suppose you can break apart the letters into individual spans...

    – alans
    Jan 18 at 5:48



















  • It seems you'll need <span> elements for each letter you'd like to color.

    – ggorlen
    Jan 18 at 5:44











  • what's CC_List1 can you show some html

    – priyanshi srivastava
    Jan 18 at 5:45











  • CC_List1 are incorrect, the correct is list. I will edit the post, sorry.

    – Bro Faz Sol
    Jan 18 at 5:48






  • 2





    I don’t think you can apply style to text nodes; only on elements. I suppose you can break apart the letters into individual spans...

    – alans
    Jan 18 at 5:48

















It seems you'll need <span> elements for each letter you'd like to color.

– ggorlen
Jan 18 at 5:44





It seems you'll need <span> elements for each letter you'd like to color.

– ggorlen
Jan 18 at 5:44













what's CC_List1 can you show some html

– priyanshi srivastava
Jan 18 at 5:45





what's CC_List1 can you show some html

– priyanshi srivastava
Jan 18 at 5:45













CC_List1 are incorrect, the correct is list. I will edit the post, sorry.

– Bro Faz Sol
Jan 18 at 5:48





CC_List1 are incorrect, the correct is list. I will edit the post, sorry.

– Bro Faz Sol
Jan 18 at 5:48




2




2





I don’t think you can apply style to text nodes; only on elements. I suppose you can break apart the letters into individual spans...

– alans
Jan 18 at 5:48





I don’t think you can apply style to text nodes; only on elements. I suppose you can break apart the letters into individual spans...

– alans
Jan 18 at 5:48












4 Answers
4






active

oldest

votes


















0














If result is a text then you need to wrap each letter with span..
do like code below:



<div  id="list" rows="10"></div>
<script>
$(function() {
setTime();
function setTime() {
$.ajax({
url : "../abc.php",
dataType: "text",
success : function (result) {
$("#list").html(result);
$("#list")
.contents()
.filter(function(){
return this.nodeType !== 1;
})
.wrap( "<b class='colorful_text'></b>" );
$.each($(".colorful_text"), function(o, v){

var textEle = $(this).text()
console.log("textEle", textEle)
$(this).html("")
for(var n=0; n<textEle.length; n++) {
var randomColor = Math.floor(Math.random()*16777215).toString(16);
var color = '#' + randomColor
var ele = document.createElement("span")
ele.style.color = color
ele.innerText = textEle[n]

$(this).append(ele)

}

})
}
});
var date = new Date().getTime();
setTimeout(setTime, 3000);
$("#list").html();

//Here should call a function to color all the words of the div
}

});
</script>





share|improve this answer


























  • Worked perfectly! The only problem is that you are returning the <br> of the file as a string and not as a tag. See: prntscr.com/m8qz05. What can I do to fix this and <br> function as a line break?

    – Bro Faz Sol
    Jan 18 at 6:31








  • 1





    i edited my answer and do some tricks.

    – anggito wibisono
    Jan 18 at 7:21











  • Thank you! Perfect!

    – Bro Faz Sol
    Jan 18 at 8:43



















2














If you want to get only vivid colors, using randomness like this wont do.



What you need is a function for HSV to RGB conversion, like this:



function HSVtoRGB(h, s, v)
{
var r, g, b, i, f, p, q, t;
i = Math.floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6)
{
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
}
r = Math.round(r * 255).toString(16);
g = Math.round(g * 255).toString(16);
b = Math.round(b * 255).toString(16);
if (r.length < 2) r = '0' + r;
if (g.length < 2) g = '0' + g;
if (b.length < 2) b = '0' + b;

return '#' + r + g + b;
}


Parameters range from 0 to 1. Using HSVtoRGB(Math.random(), 1, 1) will always yield you a vivid color with maximum value and saturation.






share|improve this answer































    2














    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>








    share|improve this answer































      1














      ok, I try this, it exactly working like you are asking. You can use it in your code.



       window.setInterval(function(){
      changeLetterColor();
      }, 3000);



      function changeLetterColor(){
      var string = "hello world";
      var customstring ='';
      for(var i =0;i<string.length;i++){
      customstring += "<span font color= '#"+Math.floor(100000 + Math.random() * 900000)+"'>"+ string[i]+" </span>";
      }

      }





      share|improve this answer























        Your Answer






        StackExchange.ifUsing("editor", function () {
        StackExchange.using("externalEditor", function () {
        StackExchange.using("snippets", function () {
        StackExchange.snippets.init();
        });
        });
        }, "code-snippets");

        StackExchange.ready(function() {
        var channelOptions = {
        tags: "".split(" "),
        id: "1"
        };
        initTagRenderer("".split(" "), "".split(" "), channelOptions);

        StackExchange.using("externalEditor", function() {
        // Have to fire editor after snippets, if snippets enabled
        if (StackExchange.settings.snippets.snippetsEnabled) {
        StackExchange.using("snippets", function() {
        createEditor();
        });
        }
        else {
        createEditor();
        }
        });

        function createEditor() {
        StackExchange.prepareEditor({
        heartbeatType: 'answer',
        autoActivateHeartbeat: false,
        convertImagesToLinks: true,
        noModals: true,
        showLowRepImageUploadWarning: true,
        reputationToPostImages: 10,
        bindNavPrevention: true,
        postfix: "",
        imageUploader: {
        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
        allowUrls: true
        },
        onDemand: true,
        discardSelector: ".discard-answer"
        ,immediatelyShowMarkdownHelp:true
        });


        }
        });














        draft saved

        draft discarded


















        StackExchange.ready(
        function () {
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54248281%2frandom-colorful-letters%23new-answer', 'question_page');
        }
        );

        Post as a guest















        Required, but never shown

























        4 Answers
        4






        active

        oldest

        votes








        4 Answers
        4






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        0














        If result is a text then you need to wrap each letter with span..
        do like code below:



        <div  id="list" rows="10"></div>
        <script>
        $(function() {
        setTime();
        function setTime() {
        $.ajax({
        url : "../abc.php",
        dataType: "text",
        success : function (result) {
        $("#list").html(result);
        $("#list")
        .contents()
        .filter(function(){
        return this.nodeType !== 1;
        })
        .wrap( "<b class='colorful_text'></b>" );
        $.each($(".colorful_text"), function(o, v){

        var textEle = $(this).text()
        console.log("textEle", textEle)
        $(this).html("")
        for(var n=0; n<textEle.length; n++) {
        var randomColor = Math.floor(Math.random()*16777215).toString(16);
        var color = '#' + randomColor
        var ele = document.createElement("span")
        ele.style.color = color
        ele.innerText = textEle[n]

        $(this).append(ele)

        }

        })
        }
        });
        var date = new Date().getTime();
        setTimeout(setTime, 3000);
        $("#list").html();

        //Here should call a function to color all the words of the div
        }

        });
        </script>





        share|improve this answer


























        • Worked perfectly! The only problem is that you are returning the <br> of the file as a string and not as a tag. See: prntscr.com/m8qz05. What can I do to fix this and <br> function as a line break?

          – Bro Faz Sol
          Jan 18 at 6:31








        • 1





          i edited my answer and do some tricks.

          – anggito wibisono
          Jan 18 at 7:21











        • Thank you! Perfect!

          – Bro Faz Sol
          Jan 18 at 8:43
















        0














        If result is a text then you need to wrap each letter with span..
        do like code below:



        <div  id="list" rows="10"></div>
        <script>
        $(function() {
        setTime();
        function setTime() {
        $.ajax({
        url : "../abc.php",
        dataType: "text",
        success : function (result) {
        $("#list").html(result);
        $("#list")
        .contents()
        .filter(function(){
        return this.nodeType !== 1;
        })
        .wrap( "<b class='colorful_text'></b>" );
        $.each($(".colorful_text"), function(o, v){

        var textEle = $(this).text()
        console.log("textEle", textEle)
        $(this).html("")
        for(var n=0; n<textEle.length; n++) {
        var randomColor = Math.floor(Math.random()*16777215).toString(16);
        var color = '#' + randomColor
        var ele = document.createElement("span")
        ele.style.color = color
        ele.innerText = textEle[n]

        $(this).append(ele)

        }

        })
        }
        });
        var date = new Date().getTime();
        setTimeout(setTime, 3000);
        $("#list").html();

        //Here should call a function to color all the words of the div
        }

        });
        </script>





        share|improve this answer


























        • Worked perfectly! The only problem is that you are returning the <br> of the file as a string and not as a tag. See: prntscr.com/m8qz05. What can I do to fix this and <br> function as a line break?

          – Bro Faz Sol
          Jan 18 at 6:31








        • 1





          i edited my answer and do some tricks.

          – anggito wibisono
          Jan 18 at 7:21











        • Thank you! Perfect!

          – Bro Faz Sol
          Jan 18 at 8:43














        0












        0








        0







        If result is a text then you need to wrap each letter with span..
        do like code below:



        <div  id="list" rows="10"></div>
        <script>
        $(function() {
        setTime();
        function setTime() {
        $.ajax({
        url : "../abc.php",
        dataType: "text",
        success : function (result) {
        $("#list").html(result);
        $("#list")
        .contents()
        .filter(function(){
        return this.nodeType !== 1;
        })
        .wrap( "<b class='colorful_text'></b>" );
        $.each($(".colorful_text"), function(o, v){

        var textEle = $(this).text()
        console.log("textEle", textEle)
        $(this).html("")
        for(var n=0; n<textEle.length; n++) {
        var randomColor = Math.floor(Math.random()*16777215).toString(16);
        var color = '#' + randomColor
        var ele = document.createElement("span")
        ele.style.color = color
        ele.innerText = textEle[n]

        $(this).append(ele)

        }

        })
        }
        });
        var date = new Date().getTime();
        setTimeout(setTime, 3000);
        $("#list").html();

        //Here should call a function to color all the words of the div
        }

        });
        </script>





        share|improve this answer















        If result is a text then you need to wrap each letter with span..
        do like code below:



        <div  id="list" rows="10"></div>
        <script>
        $(function() {
        setTime();
        function setTime() {
        $.ajax({
        url : "../abc.php",
        dataType: "text",
        success : function (result) {
        $("#list").html(result);
        $("#list")
        .contents()
        .filter(function(){
        return this.nodeType !== 1;
        })
        .wrap( "<b class='colorful_text'></b>" );
        $.each($(".colorful_text"), function(o, v){

        var textEle = $(this).text()
        console.log("textEle", textEle)
        $(this).html("")
        for(var n=0; n<textEle.length; n++) {
        var randomColor = Math.floor(Math.random()*16777215).toString(16);
        var color = '#' + randomColor
        var ele = document.createElement("span")
        ele.style.color = color
        ele.innerText = textEle[n]

        $(this).append(ele)

        }

        })
        }
        });
        var date = new Date().getTime();
        setTimeout(setTime, 3000);
        $("#list").html();

        //Here should call a function to color all the words of the div
        }

        });
        </script>






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Jan 18 at 7:20

























        answered Jan 18 at 6:02









        anggito wibisonoanggito wibisono

        444




        444













        • Worked perfectly! The only problem is that you are returning the <br> of the file as a string and not as a tag. See: prntscr.com/m8qz05. What can I do to fix this and <br> function as a line break?

          – Bro Faz Sol
          Jan 18 at 6:31








        • 1





          i edited my answer and do some tricks.

          – anggito wibisono
          Jan 18 at 7:21











        • Thank you! Perfect!

          – Bro Faz Sol
          Jan 18 at 8:43



















        • Worked perfectly! The only problem is that you are returning the <br> of the file as a string and not as a tag. See: prntscr.com/m8qz05. What can I do to fix this and <br> function as a line break?

          – Bro Faz Sol
          Jan 18 at 6:31








        • 1





          i edited my answer and do some tricks.

          – anggito wibisono
          Jan 18 at 7:21











        • Thank you! Perfect!

          – Bro Faz Sol
          Jan 18 at 8:43

















        Worked perfectly! The only problem is that you are returning the <br> of the file as a string and not as a tag. See: prntscr.com/m8qz05. What can I do to fix this and <br> function as a line break?

        – Bro Faz Sol
        Jan 18 at 6:31







        Worked perfectly! The only problem is that you are returning the <br> of the file as a string and not as a tag. See: prntscr.com/m8qz05. What can I do to fix this and <br> function as a line break?

        – Bro Faz Sol
        Jan 18 at 6:31






        1




        1





        i edited my answer and do some tricks.

        – anggito wibisono
        Jan 18 at 7:21





        i edited my answer and do some tricks.

        – anggito wibisono
        Jan 18 at 7:21













        Thank you! Perfect!

        – Bro Faz Sol
        Jan 18 at 8:43





        Thank you! Perfect!

        – Bro Faz Sol
        Jan 18 at 8:43













        2














        If you want to get only vivid colors, using randomness like this wont do.



        What you need is a function for HSV to RGB conversion, like this:



        function HSVtoRGB(h, s, v)
        {
        var r, g, b, i, f, p, q, t;
        i = Math.floor(h * 6);
        f = h * 6 - i;
        p = v * (1 - s);
        q = v * (1 - f * s);
        t = v * (1 - (1 - f) * s);
        switch (i % 6)
        {
        case 0: r = v, g = t, b = p; break;
        case 1: r = q, g = v, b = p; break;
        case 2: r = p, g = v, b = t; break;
        case 3: r = p, g = q, b = v; break;
        case 4: r = t, g = p, b = v; break;
        case 5: r = v, g = p, b = q; break;
        }
        r = Math.round(r * 255).toString(16);
        g = Math.round(g * 255).toString(16);
        b = Math.round(b * 255).toString(16);
        if (r.length < 2) r = '0' + r;
        if (g.length < 2) g = '0' + g;
        if (b.length < 2) b = '0' + b;

        return '#' + r + g + b;
        }


        Parameters range from 0 to 1. Using HSVtoRGB(Math.random(), 1, 1) will always yield you a vivid color with maximum value and saturation.






        share|improve this answer




























          2














          If you want to get only vivid colors, using randomness like this wont do.



          What you need is a function for HSV to RGB conversion, like this:



          function HSVtoRGB(h, s, v)
          {
          var r, g, b, i, f, p, q, t;
          i = Math.floor(h * 6);
          f = h * 6 - i;
          p = v * (1 - s);
          q = v * (1 - f * s);
          t = v * (1 - (1 - f) * s);
          switch (i % 6)
          {
          case 0: r = v, g = t, b = p; break;
          case 1: r = q, g = v, b = p; break;
          case 2: r = p, g = v, b = t; break;
          case 3: r = p, g = q, b = v; break;
          case 4: r = t, g = p, b = v; break;
          case 5: r = v, g = p, b = q; break;
          }
          r = Math.round(r * 255).toString(16);
          g = Math.round(g * 255).toString(16);
          b = Math.round(b * 255).toString(16);
          if (r.length < 2) r = '0' + r;
          if (g.length < 2) g = '0' + g;
          if (b.length < 2) b = '0' + b;

          return '#' + r + g + b;
          }


          Parameters range from 0 to 1. Using HSVtoRGB(Math.random(), 1, 1) will always yield you a vivid color with maximum value and saturation.






          share|improve this answer


























            2












            2








            2







            If you want to get only vivid colors, using randomness like this wont do.



            What you need is a function for HSV to RGB conversion, like this:



            function HSVtoRGB(h, s, v)
            {
            var r, g, b, i, f, p, q, t;
            i = Math.floor(h * 6);
            f = h * 6 - i;
            p = v * (1 - s);
            q = v * (1 - f * s);
            t = v * (1 - (1 - f) * s);
            switch (i % 6)
            {
            case 0: r = v, g = t, b = p; break;
            case 1: r = q, g = v, b = p; break;
            case 2: r = p, g = v, b = t; break;
            case 3: r = p, g = q, b = v; break;
            case 4: r = t, g = p, b = v; break;
            case 5: r = v, g = p, b = q; break;
            }
            r = Math.round(r * 255).toString(16);
            g = Math.round(g * 255).toString(16);
            b = Math.round(b * 255).toString(16);
            if (r.length < 2) r = '0' + r;
            if (g.length < 2) g = '0' + g;
            if (b.length < 2) b = '0' + b;

            return '#' + r + g + b;
            }


            Parameters range from 0 to 1. Using HSVtoRGB(Math.random(), 1, 1) will always yield you a vivid color with maximum value and saturation.






            share|improve this answer













            If you want to get only vivid colors, using randomness like this wont do.



            What you need is a function for HSV to RGB conversion, like this:



            function HSVtoRGB(h, s, v)
            {
            var r, g, b, i, f, p, q, t;
            i = Math.floor(h * 6);
            f = h * 6 - i;
            p = v * (1 - s);
            q = v * (1 - f * s);
            t = v * (1 - (1 - f) * s);
            switch (i % 6)
            {
            case 0: r = v, g = t, b = p; break;
            case 1: r = q, g = v, b = p; break;
            case 2: r = p, g = v, b = t; break;
            case 3: r = p, g = q, b = v; break;
            case 4: r = t, g = p, b = v; break;
            case 5: r = v, g = p, b = q; break;
            }
            r = Math.round(r * 255).toString(16);
            g = Math.round(g * 255).toString(16);
            b = Math.round(b * 255).toString(16);
            if (r.length < 2) r = '0' + r;
            if (g.length < 2) g = '0' + g;
            if (b.length < 2) b = '0' + b;

            return '#' + r + g + b;
            }


            Parameters range from 0 to 1. Using HSVtoRGB(Math.random(), 1, 1) will always yield you a vivid color with maximum value and saturation.







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Jan 18 at 6:06









            HavenardHavenard

            17.9k22646




            17.9k22646























                2














                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>








                share|improve this answer




























                  2














                  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>








                  share|improve this answer


























                    2












                    2








                    2







                    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>








                    share|improve this answer













                    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>








                    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>





                    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>






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Jan 18 at 6:13









                    Aditya GuptaAditya Gupta

                    7351820




                    7351820























                        1














                        ok, I try this, it exactly working like you are asking. You can use it in your code.



                         window.setInterval(function(){
                        changeLetterColor();
                        }, 3000);



                        function changeLetterColor(){
                        var string = "hello world";
                        var customstring ='';
                        for(var i =0;i<string.length;i++){
                        customstring += "<span font color= '#"+Math.floor(100000 + Math.random() * 900000)+"'>"+ string[i]+" </span>";
                        }

                        }





                        share|improve this answer




























                          1














                          ok, I try this, it exactly working like you are asking. You can use it in your code.



                           window.setInterval(function(){
                          changeLetterColor();
                          }, 3000);



                          function changeLetterColor(){
                          var string = "hello world";
                          var customstring ='';
                          for(var i =0;i<string.length;i++){
                          customstring += "<span font color= '#"+Math.floor(100000 + Math.random() * 900000)+"'>"+ string[i]+" </span>";
                          }

                          }





                          share|improve this answer


























                            1












                            1








                            1







                            ok, I try this, it exactly working like you are asking. You can use it in your code.



                             window.setInterval(function(){
                            changeLetterColor();
                            }, 3000);



                            function changeLetterColor(){
                            var string = "hello world";
                            var customstring ='';
                            for(var i =0;i<string.length;i++){
                            customstring += "<span font color= '#"+Math.floor(100000 + Math.random() * 900000)+"'>"+ string[i]+" </span>";
                            }

                            }





                            share|improve this answer













                            ok, I try this, it exactly working like you are asking. You can use it in your code.



                             window.setInterval(function(){
                            changeLetterColor();
                            }, 3000);



                            function changeLetterColor(){
                            var string = "hello world";
                            var customstring ='';
                            for(var i =0;i<string.length;i++){
                            customstring += "<span font color= '#"+Math.floor(100000 + Math.random() * 900000)+"'>"+ string[i]+" </span>";
                            }

                            }






                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Jan 18 at 6:10









                            Sayed Mohd AliSayed Mohd Ali

                            1,1172319




                            1,1172319






























                                draft saved

                                draft discarded




















































                                Thanks for contributing an answer to Stack Overflow!


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid



                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.


                                To learn more, see our tips on writing great answers.




                                draft saved


                                draft discarded














                                StackExchange.ready(
                                function () {
                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54248281%2frandom-colorful-letters%23new-answer', 'question_page');
                                }
                                );

                                Post as a guest















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                Popular posts from this blog

                                How to make a Squid Proxy server?

                                Is this a new Fibonacci Identity?

                                19世紀