title: How to change colors of individual characters in a header
body: <p>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:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;h1 id="demo"&gt;TEST&lt;/h1&gt;
  
  &lt;script language="javascript" type="text/javascript"&gt;
  function myFunction()
  {
    var x=document.getElementById("demo");
    var l=x.innerHTML.length;
    var newText="";
    for(var a=0;a&lt;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&lt;6;i++)
    {
      var num = Math.floor(Math.random()*17);
      hexNum = num.toString(16);
      colorString += hexNum;
    }
    return colorString;
  }
  &lt;/script&gt;
  &lt;button type="button" onclick="myFunction()"&gt;Change Color&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What's happening is the fontcolor method actually does <code>&lt;FONT color=#FF0000&gt;T&lt;/FONT&gt;&lt;FONT color=#00FF00&gt;E&lt;/FONT&gt;&lt;FONT color=#0000ff&gt;S&lt;/FONT&gt;&lt;FONT color=#000000&gt;T&lt;/FONT&gt;</code> 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!</p>