How to make a onclick function random?

Question

Could you guys look at my edited code based on the replies please.

I have this code right now in my javascript:

 function test(sheet)
 {
     document.getElementById('pagestyle').setAttribute('href', sheet);
 }

And I want to use this function to change my stylesheet

onclick="test('CSS/katy.css')"

My question is, how do I make the "katy.css" a random css file from my folder.

I was thinking about an array but I don't know how to apply this.

var cssName=new Array(3)

cssName[0]="<link rel='stylesheet' type='text/css' href='CSS/katy.css'>";
cssName[1]="<link rel='stylesheet' type='text/css' href='CSS/daftpunk.css'>";
cssName[2]="<link rel='stylesheet' type='text/css' href='CSS/wiliam.css'>"; 

edited button:

onclick="test('CSS/' + cssName1[rndIndex])" 

Edited test function:

 function test(sheet)
 {
    var cssName1=new Array(3)

    cssName1[0]="<link rel='stylesheet' type='text/css' href='CSS/katy.css'>";
    cssName1[1]="<link rel='stylesheet' type='text/css' href='CSS/daftpunk.css'>";
    cssName1[2]="<link rel='stylesheet' type='text/css' href='CSS/wiliam.css'>";  
    var rndIndex= Math.floor(Math.random()*3);

     document.getElementById('pagestyle').setAttribute('href', sheet);
 }

Answer 1

You could generate a random int number in [1,3], with the following way:

var rndIndex = Math.floor(Math.random()*3);

Then you can use the generated index to get the css you want:

onclick="test(cssName[rndIndex])";

Note In the cssName table it would be better you place only the corresponding href's. I am saying this, because as I noticed in the declaration of your function you set the value for the href attribute.

Update I would suggest, as you will see in the fiddle here to declare a parameterless function for your purpose. I have declared the setCss function and then there select the pagestyele element and set it's attribute called 'href' to one of your css randomnly.

Answer 2

You can use Math.random in a function:

var cssName=new Array(3)

cssName[0]="katy.css";
cssName[1]="daftpunk.css";
cssName[2]="wiliam.css"; 

function getRand(array){
    return array[ Math.floor(Math.random() * array.length) ];
}

var static = "<link rel='stylesheet' type='text/css' href='";

alert(static + getRand(cssName) + "'>");

DEMO

Answer 3

You are in the correct way.

With your array, now you can select a random element as:

cssName[parseInt(Math.random() * cssName.length + 1)]

Answer 4

ok you can use the rand function like the following:

first defined the array

var cssName=new Array(3)

cssName[0]="CSS/katy.css";
cssName[1]="CSS/daftpunk.css";
cssName[2]="CSS/wiliam.css";

now select the sheet randomlly

var index = Math.floor((Math.random()*3));

and then select the random sheet

onclick = "test("+cssName[index]+")";

Answer 5

you can use Window setTimeout() Method and for example per 30 second add a new link with jquery . setTimeout()

And you can see address: How to use jQuery setTimeout function

but this idea causes that the speed of your website decreases.