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>