CODEWITHSUNDEEP
htmlcssrandom
Hunter S
Hunter S

Reputation: 11

JavaScript: Random Style Class Using Math.Random()

I am in a Basic HTML/Javascript class and I cannot figure out how to "modify the following JavaScript so that it picks one of the style classes at random each time it is called." The below code works, but it isn't randomized. Any suggestions would be helpful. Thank you, in advance!

<html>

<head>
<title>HTML and JavaScript</title>
<link href="capstone.css" rel="stylesheet" type="text/css"></link>
<script>
function getRandomInt (min, max) 
{
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
var index = getRandomInt(1, 20);

function stylize()
{
  index++;
  if (index > 7) index =1;
  var s = "myStyle" + index;
  var e = document.getElementById("MessageText");
  e.className = s;
  setTimeout("stylize()", 1500);
  return;
}
 </script>
 </head>

 <body onLoad="stylize()">
  <table align="center" border="1" bordercolor="black">
   <tr>
    <td align="center">
     <font size="3"><b>STYLE CLASS VIEWER</b></font>
    </td>
   </tr>
   <tr>
    <td align="center" height="100" width="400">
     <div id="MessageText" class="myStyle1">
      Hello World Wide Web!
     <div>
    </td>
   </tr>
  </table>
 </body>

</html>

MY CSS PAGE IS:.....

.myStyle1 {font-family:Impact; color:black; font-size:100}
.myStyle2 {font-family:Georgia; color:black; font-size:18}
.myStyl31 {font-family:Tahoma; color:black; font-size:24}
.myStyle4 {font-family:Verdana; color:black; font-size:48}
.myStyle5 {font-family:Impact; color:red; font-size:30}
.myStyle6 {font-family:Marlett; color:green; font-size:65}
.myStyle7 {font-family:Arial; color:blue; font-size:46}
.myStyle8 {font-family:Courier Sans MS Bold; color:blue; font-size:60}
.myStyle9 {font-family:Impact; color:blue; font-size:35}
.myStyle10 {font-family:Arial Italic; color:blue; font-size:10}
.myStyle11 {font-family:Times New Roman; color:blue; font-size:50}
.myStyle12 {font-family:Tahoma; color:blue; font-size:38}
.myStyle13 {font-family:Verdana; color:white; font-size:30}
.myStyle14 {font-family:Marlett; color:blue; font-size:70}
.myStyle15 {font-family:Impact; color:blue; font-size:24}
.myStyle16 {font-family:Georgia; color:blue; font-size:24}
.myStyle17 {font-family:Impact; color:blue; font-size:35}
.myStyle18 {font-family:Georgia; color:black; font-size:12;}
.myStyle19 {font-family:Arial; color:blue; font-size:20;}
.myStyle20 {font-family:Tahoma; color:blue; font-size:55}

This seems to not work for me can anyone help.

Upvotes: 0

Views: 407

Answers (2)

user3589620
user3589620

Reputation:

Remark

You can shorten the code as follows 

var text = document.getElementById("text");

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function stylize() {
  var interval = setInterval(function() {
    var rand = getRandomInt(1, 20);
    text.setAttribute("class", "myStyle" + rand);
  }, 1500);
}

stylize();
.myStyle1 {
  font-family: Impact;
  color: black;
  font-size: 100
}

.myStyle2 {
  font-family: Georgia;
  color: black;
  font-size: 18
}

.myStye3 {
  font-family: Tahoma;
  color: black;
  font-size: 24
}

.myStyle4 {
  font-family: Verdana;
  color: black;
  font-size: 48
}

.myStyle5 {
  font-family: Impact;
  color: red;
  font-size: 30
}

.myStyle6 {
  font-family: Marlett;
  color: green;
  font-size: 65
}

.myStyle7 {
  font-family: Arial;
  color: blue;
  font-size: 46
}

.myStyle8 {
  font-family: Courier Sans MS Bold;
  color: blue;
  font-size: 60
}

.myStyle9 {
  font-family: Impact;
  color: blue;
  font-size: 35
}

.myStyle10 {
  font-family: Arial Italic;
  color: blue;
  font-size: 10
}

.myStyle11 {
  font-family: Times New Roman;
  color: blue;
  font-size: 50
}

.myStyle12 {
  font-family: Tahoma;
  color: blue;
  font-size: 38
}

.myStyle13 {
  font-family: Verdana;
  color: white;
  font-size: 30
}

.myStyle14 {
  font-family: Marlett;
  color: blue;
  font-size: 70
}

.myStyle15 {
  font-family: Impact;
  color: blue;
  font-size: 24
}

.myStyle16 {
  font-family: Georgia;
  color: blue;
  font-size: 24
}

.myStyle17 {
  font-family: Impact;
  color: blue;
  font-size: 35
}

.myStyle18 {
  font-family: Georgia;
  color: black;
  font-size: 12;
}

.myStyle19 {
  font-family: Arial;
  color: blue;
  font-size: 20;
}

.myStyle20 {
  font-family: Tahoma;
  color: blue;
  font-size: 55
}
<table align="center" border="1" bordercolor="black">
  <tr>
    <td align="center">
      <font size="3"><b>STYLE CLASS VIEWER</b></font>
    </td>
  </tr>
  <tr>
    <td align="center" height="100" width="400">
      <div id="text" class="myStyle1">
        Hello World Wide Web!
      </div>
    </td>
  </tr>
</table>

Upvotes: 0

hardfork
hardfork

Reputation: 3251

Remove var index = getRandomInt(1, 20);

And then, replace index++; with var index = getRandomInt(1, 20);.

And if you want to accept more than 7 styles, remove if (index > 7) index = 1;.

In this case, it picks a random number each time. In your case, a random number was picked (mostly 1 of if (index > 7) index = 1;) and you incremented it each time.

<html>

<head>
<title>HTML and JavaScript</title>
<link href="capstone.css" rel="stylesheet" type="text/css"></link>
<style>
 .myStyle1 {font-family:Impact; color:black; font-size:100} .myStyle2 {font-family:Georgia; color:black; font-size:18} .myStyl31
{font-family:Tahoma; color:black; font-size:24} .myStyle4 {font-family:Verdana; color:black; font-size:48} .myStyle5 {font-family:Impact;
color:red; font-size:30} .myStyle6 {font-family:Marlett; color:green; font-size:65} .myStyle7 {font-family:Arial; color:blue;
font-size:46} .myStyle8 {font-family:Courier Sans MS Bold; color:blue; font-size:60} .myStyle9 {font-family:Impact; color:blue;
font-size:35} .myStyle10 {font-family:Arial Italic; color:blue; font-size:10} .myStyle11 {font-family:Times New Roman; color:blue;
font-size:50} .myStyle12 {font-family:Tahoma; color:blue; font-size:38} .myStyle13 {font-family:Verdana; color:white; font-size:30}
.myStyle14 {font-family:Marlett; color:blue; font-size:70} .myStyle15 {font-family:Impact; color:blue; font-size:24} .myStyle16
{font-family:Georgia; color:blue; font-size:24} .myStyle17 {font-family:Impact; color:blue; font-size:35} .myStyle18 {font-family:Georgia;
color:black; font-size:12;} .myStyle19 {font-family:Arial; color:blue; font-size:20;} .myStyle20 {font-family:Tahoma; color:blue;
font-size:55}
</style>
<script>
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  

  function stylize() {
    var index = getRandomInt(1, 20);
    var s = "myStyle" + index;
    var e = document.getElementById("MessageText");
    e.className = s;
    setTimeout("stylize()", 1500);
    return;
  }
</script>
 </head>

 <body onLoad="stylize()">
  <table align="center" border="1" bordercolor="black">
   <tr>
    <td align="center">
     <font size="3"><b>STYLE CLASS VIEWER</b></font>
    </td>
   </tr>
   <tr>
    <td align="center" height="100" width="400">
     <div id="MessageText" class="myStyle1">
      Hello World Wide Web!
     <div>
    </td>
   </tr>
  </table>

 </body>

</html>

Upvotes: 1

Related Questions