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);
 }

possible duplicate of [Generating random numbers in Javascript in a specific range?](http://stackoverflow.com/questions/1527803/generating-random-numbers-in-javascript-in-a-specific-range) — Paul S., Apr 07 '14 at 14:50
`onclick="test('CSS/' + cssName1[rndIndex])" ` won't work because you are defining the array and the random index inside of test. So when you pass it to the function, they are not defined yet — Huangism, Apr 07 '14 at 15:09
As a matter of fact, since you are doing a random pick, there is no need to pass the array to the function, jsut do everything inside the function, see http://jsfiddle.net/EcBxp/1/ — Huangism, Apr 07 '14 at 15:18
Hey thanks, the alert does show the a random stylesheet but how do I imply this to the html file so it actually does show the stylesheet — user3406286, Apr 07 '14 at 15:24

Christos · Accepted Answer · 2014-04-07T15:27:46.553

4

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.

edited Apr 07 '14 at 15:27

answered Apr 07 '14 at 14:46

Christos

53,228
8
76
108

1

Double quotes repeating – nicael Apr 07 '14 at 14:49
I don't think `onclick="test("+cssName[rndIndex]+")";` will run, but `onclick="alert(cssName[rndIndex])"` will – Huangism Apr 07 '14 at 14:52
Hey thanks for reply. I used onclick="test('CSS/' + cssName1[rndIndex])" (is this correct?) And for the test() function I edited it. Could you take a look, cause it ain't working for me. – user3406286 Apr 07 '14 at 14:53
@user3406286 you welcome. nope. I think that you have to pass only the href to the test function, as you have declared it. Sure I will take a look right now. – Christos Apr 07 '14 at 14:57
1

@ChristosPaisios Please test out your answer, `onclick="test('+cssName[rndIndex]+')";` does not work the way you think it does http://jsfiddle.net/EcBxp/ it's a good thing the OP is not copying the code straight up – Huangism Apr 07 '14 at 15:01
@Huangism yeap I am testing it right now. Thanks for letting me know. – Christos Apr 07 '14 at 15:02
@ChristosPaisios post a fiddle please, I think OP will need it – Huangism Apr 07 '14 at 15:09
@Huangism ok will do. – Christos Apr 07 '14 at 15:10
Thanks guys appreciate the help, but the CSS is in the folder "CSS" how to do I add the location in onclick="test('+cssName[rndIndex]+')"; – user3406286 Apr 07 '14 at 15:11
@user3406286 you don't need to add it in the onclick, you can just attach it in the test function – Huangism Apr 07 '14 at 15:12
@user3406286 please give me a few minutes and I will come up with a fiddle. Thanks for the patience – Christos Apr 07 '14 at 15:12
@user3406286 please look here http://jsfiddle.net/C87d3/. In case of having any questions please just let me know. – Christos Apr 07 '14 at 15:27
Hey thanks it looks great. On the alert it shows a random Stylesheet, but how do I actually make my html file make use of it? Cause now it stays the same stylesheet. – user3406286 Apr 07 '14 at 15:32
@user3406286 glad to hear about this. You have to use document.getElementById('pagestyle').setAttribute('href', cssName[rndIndex]); instead of using alert. – Christos Apr 07 '14 at 15:41
Ah thanks dude really great help! Could I ask one more thing. Is there a way to prevent the code from picking the same stylesheet again? Sorry for asking so much, if you don't wanna answer it's oke, I will mark you as best answer. – user3406286 Apr 07 '14 at 15:50
1

@user3406286 you should mark this one as best answer and do some research, if nothing comes up then post a new queston – Huangism Apr 07 '14 at 15:55
@user3406286 it's nothing too difficult. Try to think about it and do some reasearch. Then if you have any specific question about how to implement it, please post another question or post a comment hear. Thanks – Christos Apr 07 '14 at 16:00

score 1 · Answer 2 · answered Apr 07 '14 at 14:47

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

score 1 · Answer 3 · answered Apr 07 '14 at 14:48

1

You are in the correct way.

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

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

answered Apr 07 '14 at 14:48

adripanico

1,026
14
32

score 0 · Answer 4 · answered Apr 07 '14 at 14:49

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]+")";

score -1 · Answer 5 · answered Apr 07 '14 at 14:51

-1

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.

answered Apr 07 '14 at 14:51

A.A

1,138
1
16
29

What is _jaquery_ ? Is _w3schools_ related to an official spec? (answer: no) – Paul S. Apr 07 '14 at 14:52

How to make a onclick function random?

5 Answers5