javascript - How to change colors of individual characters in a header

My object is to take a header and by only using JavaScript (no JQuery), randomly color each individual letter. What I have seems to be pretty close:

<!DOCTYPE html>
<html>
<body>
<h1 id="demo">TEST</h1>

<script language="javascript" type="text/javascript">
function myFunction()
{
  var x=document.getElementById("demo");
  var l=x.innerHTML.length;
  var newText="";
  for(var a=0;a<l;a++)
  {
    var letter = x.innerHTML.charAt(a);
    newText += letter.fontcolor(getColor());
  }
  x.innerHTML=newText;
  alert(x.innerHTML);
}

function getColor()
{
  var colorString="";
  for(var i=0;i<6;i++)
  {
    var num = Math.floor(Math.random()*17);
    hexNum = num.toString(16);
    colorString += hexNum;
  }
  return colorString;
}
</script>
<button type="button" onclick="myFunction()">Change Color</button>
</body>
</html>

What's happening is the fontcolor method actually does TEST This works for the first time I hit the button, but the next time I hit it, it does the fontcolor for every letter in the code snipit. I've confirmed this based on my alert I have in my code. Is there a more practical way of coloring individual letters? Is it possible to retrieve just the letters from the header instead of the letters plus the font coloring code? I'm unable to use JQuery and, if possible, would rather not use spans. Thanks a lot!

My object is to take a header and by only using JavaScript (no JQuery), randomly color each individual letter. What I have seems to be pretty close:

<!DOCTYPE html>
<html>
<body>
<h1 id="demo">TEST</h1>

<script language="javascript" type="text/javascript">
function myFunction()
{
  var x=document.getElementById("demo");
  var l=x.innerHTML.length;
  var newText="";
  for(var a=0;a<l;a++)
  {
    var letter = x.innerHTML.charAt(a);
    newText += letter.fontcolor(getColor());
  }
  x.innerHTML=newText;
  alert(x.innerHTML);
}

function getColor()
{
  var colorString="";
  for(var i=0;i<6;i++)
  {
    var num = Math.floor(Math.random()*17);
    hexNum = num.toString(16);
    colorString += hexNum;
  }
  return colorString;
}
</script>
<button type="button" onclick="myFunction()">Change Color</button>
</body>
</html>

Share Improve this question asked Dec 27, 2013 at 18:44 Brian 5292 gold badges7 silver badges17 bronze badges

I'm not sure how with vanilla JS but in jQuery you can get the string using .text() which will omit the HTML tags. – Jasper Commented Dec 27, 2013 at 18:46
In order to style each letter, you will have to wrap it in something. A span is the best fit, given what you're trying to acplish. font is deprecated and you should be phasing it out and not adding it to new code. – Tom Pietrosanti Commented Dec 27, 2013 at 19:10
If you do decide to use jQuery, check out lettering.js – Tom Pietrosanti Commented Dec 27, 2013 at 19:11

Add a ment |

4 Answers 4

Sorted by: Reset to default 4

Well, after calling the function once x.innerHTML will not only contain the text, but also the HTML for the font elements. If you want to get the inner text only, you can use textContent or innerText (depending on the browser):

var x = document.getElementById("demo");
var text = x.textContent || x.innerText;
var newText="";
for(var a=0; a < text.length; a++) {
    var letter = text.charAt(a);
    // ...
}

If you don't care about IE8 or IE7, you can do this more elegantly with:

var new_text = Array.prototype.map.call(x.textContent || x.innerText, function(letter) {
    return letter.fontcolor(getColor());
}).join('');

But you really shouldn't use the font element anymore, it's deprecated since ages.

Warning: fontcolor is not standard and  elements are deprecated!

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large inpatibilities between implementations and the behavior may change in the future.

You can use .textContent:

function myFunction()
{
    var x = document.getElementById("demo"),
        txt = x.textContent,
        newText = "";
    for(var i=0, l=txt.length; i<l; i++)
    {
        newText += txt.charAt(i).fontcolor(getColor());
    }
    x.innerHTML = newText;
}

Demo

You could use

function myFunction()
{
    var x = document.getElementById("demo"),
        txt = x.innerHTML;
    (myFunction = function() {
        var newText = "";
        for(var i=0, l=txt.length; i<l; i++)
        {
            newText += '<span style="color:#'+getColor()+'">'+txt.charAt(i)+'</span>';
        }
        x.innerHTML = newText;
    })();
}

Demo

It works on old browsers because it doesn't use .textContent, and doesn't use the non-standard fontcolor

Well, you could before you replace the text, you move the text in the title attribute, and then use the attribute for the original text and then you will always have the original text. For example:

<h1>Flip That</h1>

Then you have your script before it does the random colors set the title if it hasn't been set before like below:

<h1 title="Flip That">Flip That</h1>

Then you always use the title instead for the original string:

<h1 title="Flip That"><font color="#0a0a0a">F</font><font color="#0b0b0b">l</font><font color="#0c0c0c">i</font><font color="#0d0d0d">p</font><font color="#0e0e0e"> </font><font color="#0a0a0a">T</font><font color="#0b0b0b">h</font><font color="#0b0b0b">a</font><font color="#0b0b0b">t</font></h1>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to change colors of individual characters in a header - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)