I am trying to generate a new font every time my page is refreshed from a list in my JavaScript. I want 4 fonts total, and I want the line that reads "Font" to be the font that actually changes. I can't get the font to change at all anytime I refresh the page. Any way I can possibly do that with JavaScript? Here are some things I tried:
<script>
var fontType = [ "Arial", "Verdana", "Helvetica"];
var num;
num=Math.floor(Math.random()*3);
document.getElementById("fontfamily").src=fontType[num];
</script>
This didn't seem to work. I wondered I'd have to call an ID for the fonts, but is there even such a thing as "GetelementById(fontfamily)"? This was also in my body tags.
var font = [];
font[0] = "Times New Roman";
font[1] = "Arial";
font[2] = "Helvetica";
Would this be a better option? How would I get this to randomly choose?
I am trying to generate a new font every time my page is refreshed from a list in my JavaScript. I want 4 fonts total, and I want the line that reads "Font" to be the font that actually changes. I can't get the font to change at all anytime I refresh the page. Any way I can possibly do that with JavaScript? Here are some things I tried:
<script>
var fontType = [ "Arial", "Verdana", "Helvetica"];
var num;
num=Math.floor(Math.random()*3);
document.getElementById("fontfamily").src=fontType[num];
</script>
This didn't seem to work. I wondered I'd have to call an ID for the fonts, but is there even such a thing as "GetelementById(fontfamily)"? This was also in my body tags.
var font = [];
font[0] = "Times New Roman";
font[1] = "Arial";
font[2] = "Helvetica";
Would this be a better option? How would I get this to randomly choose?
Share Improve this question edited Feb 18, 2014 at 18:58 user2203117 asked Feb 18, 2014 at 18:50 user3324837user3324837 411 gold badge2 silver badges3 bronze badges2 Answers
Reset to default 7You want document.getElementById("fontfamily").style.fontFamily;
Whenever you want to style an element using JavaScript, use .style then camelcase the css attribute. so font-family bees fontFamily, background-image bees backgroundImage
var fontType = [ "Arial", "Verdana", "Helvetica"];
var num;
num=Math.floor(Math.random()*3);
document.getElementById("fontfamily").style.fontFamily =fontType[num];
http://jsfiddle/DZnbR/
Here you go :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis./css?family=Open+Sans|Raleway|Roboto" rel="stylesheet">
<style>
.Roboto{
font-family: 'Roboto', sans-serif;
}
.Open_Sans{
font-family: 'Open Sans', sans-serif;
}
.Roboto{
font-family: 'Raleway', sans-serif;
}
</style>
</head>
<body id="body">
<script>
var fonts = ['Roboto', 'Open_Sans', 'Raleway'];
var rand = fonts[Math.floor(Math.random() * fonts.length)];
console.log(rand);
var bodyElement = document.getElementById("body");
bodyElement.className = rand;
</script>
</body>
</html>