How to make each letter in text a different random color in Javascript

Question

I am trying to make every letter in a small line of text a different random color. I can only seem to make it do this when I use .hover, but I want it to do the action straight away (once the page loads). Please help. I would also like to know if anyone knows how to just set different colors on each letter (set colors) with css or Javascript because when I tried to do it in that way, it wouldnt allow me call a function on the same div/id (i tried to arch the text). Thank you.

THIS IS MY CODE

var colours = ["#000000", "#FF0000", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"], 
    idx;

$("#arch").hover(function(){
    var div = $(this); 
    var chars = div.text().split('');
    div.html('');     
    for(var i=0; i<chars.length; i++) {
        idx = Math.floor(Math.random() * colours.length);
        var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx])
        div.append(span);
    }

}, function() {
    $(this).find('span').css("color","#FF0000");
});

cooper667 · Accepted Answer · 2013-11-26 22:16:43Z

2

    var colours = ["#000000", "#FF0000", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"], 
    idx;

$(function() {
    var div = $('#arch'); 
    var chars = div.text().split('');
    div.html('');     
    for(var i=0; i<chars.length; i++) {
        idx = Math.floor(Math.random() * colours.length);
        var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx]);
        div.append(span);
    }
});

Works for me. jsFiddle

You have to make sure the DOM is loaded before doing any jQuery stuff on it.

http://learn.jquery.com/using-jquery-core/document-ready/

answered Nov 26, 2013 at 22:16

cooper667

4254 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Erty Seidohl · Accepted Answer · 2013-11-26 22:08:59Z

1

Try (untested):

$(document).ready(function(){
    var div = $('#arch'); 
    var chars = div.text().split('');
    div.html('');     
    for(var i=0; i<chars.length; i++) {
        idx = Math.floor(Math.random() * colours.length);
        var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx])
        div.append(span);
    }
}

Basically, you need to wait for the DOM to load so that there's a div to find when you call $('#arch')!

I'm not sure what you mean by "tried to arch the text".

answered Nov 26, 2013 at 22:08

Erty Seidohl

4,5893 gold badges36 silver badges50 bronze badges

1 Comment

user3038404 Over a year ago

I am trying to arch/curve the text, but when I try to do this with the random color thing, it does not arch the text. CODE -> $("#arch").arctext({radius: 300}) var colours = ["#000000", "#FF0000", "#990066", "#FF9966", "#996666", "#00FF00", "#CC9933"], idx; $(function() { var div = $('#arch'); var chars = div.text().split(''); div.html(''); for(var i=0; i<chars.length; i++) { idx = Math.floor(Math.random() * colours.length); var span = $('<span>' + chars[i] + '</span>').css("color", colours[idx]); div.append(span); } });

Collectives™ on Stack Overflow

How to make each letter in text a different random color in Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related