JavaScript: Random Style Class Using Math.Random()

Question

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.

hardfork · Accepted Answer · 2017-12-10 18:08:41Z

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>

score 0 · Accepted Answer · 2017-12-10 18:21:37Z

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>

Collectives™ on Stack Overflow

JavaScript: Random Style Class Using Math.Random()

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related