i have the following code, that randomizes text from an array.
However what im not sure how to do the following.
- display the result on browser load instead of onclick.
- display the output to a div CLASS on load (so if i have multiple divs called "output", a random font/size/weight will be displayed in each div)
- it should take the font from each div element and change the classes etc, instead of using the font names etc.
- instead of using the font names in an array, how do i point each variable to a class? .font1 {font-family:Verdana, Geneva, sans-serif;} .font2 {font-family:Georgia, "Times New Roman", Times, serif;} .font3 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;} .font4 {font-family:"Times New Roman", Times, serif;} .font5 {font-family:"Comic Sans MS", cursive;} var fonts = ['.font1', '.font2', '.font3', '.font4', '.font5'];
really hope someone can help.
code is as follows;
<button onclick="run()">Test</button>
<div id="output"/>
var fonts = ['Arial', 'Helvetica', 'Georgia', 'Tahoma', 'Verdana'];
var weights = ['normal', 'bold', 'lighter'];
var sizes = ['16px', '20px', '24px', '36px', '40px'];
var choose = function(arr) {
return arr[Math.floor(Math.random() * arr.length)];
};
var output = document.getElementById("output");
window.run = function() {
var text = choose(sizes) + ' ' + choose(weights) + ' ' + choose(fonts);
output.innerHTML = '<div class="randomFont" style="font: ' + text + '">' + text + '</div>';
}