Randomizing 3 arrays in JavaScript/jQuery

Question

I would like to randomize three arrays for fonts, font size, font weight. I then need to display the results of the three arrays in a div, with a class name of randomFont. So each time I use the class randomFont, it will return a random font/size/weight.

Any ideas on how I would go about doing this?

Let's say I have 3 variables in each array.

array 1 (fonts) > font 1, font 2, font 3
array 2 (font weight) > bold, light, 100
array 3 (font-size) > 12px, 24px, 100px

Then I want an an array to randomly choose one from each and display the output in a div>class called randomFont.

How would I do this?

ncremins · Accepted Answer · 2012-11-20 18:33:42Z

2

Don't really need jQuery but this should do it, since you didn't supply any example code I've had to make it up but this should get you on your way.

var item = items[Math.floor(Math.random() * items.length)];

do this for each array.

answered Nov 20, 2012 at 18:33

ncremins

9,2202 gold badges28 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alain Over a year ago

I think you get a random element, but not a randomized array?

user1106295 Over a year ago

lets say i have 3 variables in each array. array 1 (fonts) > font 1, font 2, font 2 array 2 (font weight) > bold, light, 100 array 3 (font-size)> 12px, 24px, 100px then i want an an array to randomly choose one from each and display the output in a div>class called randomFont.

Scott Sauyet · Accepted Answer · 2012-11-20 21:18:57Z

1

You can see one approach at http://jsfiddle.net/CrossEye/bwsvy/

var fonts = ['Arial', 'Helvetica', 'Georgia', 'Tahoma', 'Verdana'];
var weights = ['normal', 'bold', 'lighter'];
var sizes = ['16px', '20px', '24px', '36px', '40px'];

var choose = function(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
};

// ...
var text = choose(sizes) + ' ' + choose(weights) + ' '  +  choose(fonts);
output.innerHTML = '<div class="randomFont">' + text + '</div>';
// e.g. '24px bold Tahoma'

answered Nov 20, 2012 at 21:18

Scott Sauyet

50.9k5 gold badges57 silver badges111 bronze badges

3 Comments

user1106295 Over a year ago

question: is it possible to have the three variable pointing to classes? e.g var fonts = ['.font1', '.font2', '.font3', '.font4', '.font5']; also is it possible to have this function auto run on page load, and just look for a div tag called "output"? as opposed to creating one? really hope you can help.

Scott Sauyet Over a year ago

Yes, it would be quite possible. Have you tried either of them? Have you searched the web for the page load question?

user1106295 Over a year ago

i tried the var classes like above but tart isnt working, searching for it, im finding nothing :(

Scott Sauyet · Accepted Answer · 2012-11-20 18:54:24Z

0

It's not clear what you mean by randomizing the arrays. If you have a fixed list of values and you want to rearrange them in place, then you want a shuffle functions, something like this:

var shuffle = function(arr) {
    for (var i = arr.length; i--;) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}

That might be a partial answer to what you're looking for, but it's really not clear to me what you're after overall.

answered Nov 20, 2012 at 18:54

Scott Sauyet

50.9k5 gold badges57 silver badges111 bronze badges

Collectives™ on Stack Overflow

Randomizing 3 arrays in JavaScript/jQuery

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related