Style each letter in a string with a random color/size on click of button

I need to design a JavaScript script that writes a given text string to the screen so that the size and color of each character is set up randomly, using at least 7 colors and 5 sizes. I am able to get the string of text to randomly change color and size, but I can't seem to get it to work for each individual letter. I've included my code, and the code commented out is what I've tried but doesn't work.

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h1 id="header" name="header" value="">JavaScript is fun!</h1>
  <button type="button" onclick="randomizeText()">Randomize!</button>

  <script language="JavaScript">
    // <!--
    function generateRandomColor() {
      var colors = ["green", "blue", "red", "yellow", "cyan", "orange", "magenta"];
      var randomColor = colors[Math.floor(Math.random() * colors.length)];
      return randomColor;
    };

    function generateRandomFontSize() {
      var sizes = ["12px", "14px", "16px", "18px", "20px"];
      var randomSize = sizes[Math.floor(Math.random() * sizes.length)];
      return randomSize;
    };

    function randomizeText() {
      document.getElementById("header").style.color = generateRandomColor();
      document.getElementById("header").style.fontSize = generateRandomFontSize();
      // var newHeaderText = "";
      // for (var i = 0; i < headerText.length; i++) {
      //     var letter = headerText.charAt(i);
      //     // letter.style.fontSize.generateRandomFontSize();
      //     // letter.style.color.generateRandomColor();
      //     // newHeaderText = newHeaderText.concat(letter);
      // }
      // document.write(newHeaderText);
    };

    // document.getElementById("header").innerHTML = headerText;

    // Javascript ends here-->
  </script>
</body>

</html>

Solution

split and join the string, wrapping each letter with a span. Then you can assign different color to each of these spans.

function generateRandomColor() {
  var colors = ["green", "blue", "red", "yellow", "cyan", "orange", "magenta"];
  var randomColor = colors[Math.floor(Math.random() * colors.length)];
  return randomColor;
};

function generateRandomFontSize() {
  var sizes = ["12px", "14px", "16px", "18px", "20px"];
  var randomSize = sizes[Math.floor(Math.random() * sizes.length)];
  return randomSize;
};

function randomizeText() {
  var elem = document.getElementById("header")
  elem.style.color = generateRandomColor();
  elem.style.fontSize = generateRandomFontSize();

  elem.innerHTML = span_it(elem.innerText);
  // now each letter
  var spans = elem.querySelectorAll("span");
  spans.forEach(span => span.style.color = generateRandomColor())


};

function span_it(str) {
  return str.split("").map(letter => "<span>" + letter + "</span>").join("")
}

<h1 id="header" name="header" value="">JavaScript is fun!</h1>
<button type="button" onclick="randomizeText()">Randomize!</button>