Picking a Random Item from an Array | kirupa.com

programming
#1

by kirupa | 7 July 2012

Let's say you have an array called myShows that contains a list of some awesome TV shows that you like to watch:

This is a companion discussion topic for the original entry at http://www.kirupa.com/html5/picking_random_item_from_array.htm
#2

Great tutorial but how would I do it if I want to receive 3 random shows?

#3

One way would be to shuffle the array and then remove the first three items from it: http://www.kirupa.com/html5/shuffling_array_js.htm

That would be inefficient for large sets of data, so you could just literally remove three random items using something as follows:

var myShows = ['Bones', 'Psych', 'Big Bang Theory', 'Mad Men', 'Breaking Bad', 'Modern Family', 'Game of Thrones', 'Dexter'];

function getRandomIndex(items) {
  return Math.floor(Math.random() * items.length);
}

for (var i = 0; i < 3; i++) {
  var removedItem = myShows.splice(getRandomIndex(myShows), 1);
  document.writeln(removedItem)
}

Does this help? :smile:

Cheers,
Kirupa

#4

Kirupa,

Thank you for the walk-thru. As a newb to JS, how do I run the script and can I package it in an executable as a stand-alone app for a friend to run it from their system? Also, I changed it to fit our needs, but I cannot see it working. Help?

var myElectives = ['Fishing', 'Playground', 'Bike Riding', 'Underwater Basket Weaving', 'Playing with the Teacher', 'Silent Reading', 'Going to the Library'] var lastItem = myElectives.Length - 1 var elective = myElectives[Math.floor(Math.random() * myElectives.length)];

JDS

#5

Hi JDS! You will need to place your JS code inside a script tag in a HTML page. You can use the template here: https://www.kirupa.com/html5/html5_starting_template.htm

Now, are you planning on displaying the result to the screen? Or would a developer tool console work? The Console Logging tutorial can help with the second part: https://www.kirupa.com/html5/console.htm

For sharing with your friend, all you need to send is an HTML page. There is no need for an executable. Depending on what you answer for how you wish to display the result to the screen, I can help you further :slight_smile:

1 Like
#6

Hey Kirupa,

Thank you for responding! I wrapped it in a script tag, but I have a feeling I’m missing a display of the var value.

What I’m going for is for the principal to press a button on the display to randomly select a class for a student. The elementary students are getting to select an elective class for fun. They get a list of options and and will choose their 1st, 2nd, and 3rd preferences. I need the script to take all their selections, group them, and randomly comprise a class list.

Using your suggestions, here is my

[code]

Stalker Elementary School - Elective Class Random Selector Elective Class Random Selector [/code]

JD Stewart

#7

How do you want to display it? One quick and dirty way is by using an alert statement that will display something in a dialog:

var myElectives = ['Fishing', 'Playground', 'Bike Riding', 'Underwater Basket Weaving', 'Playing with the Teacher', 'Silent Reading', 'Going to the Library'];
var lastItem = myElectives.Length - 1;
var elective = myElectives[Math.floor(Math.random() * myElectives.length)];
alert(elective);

A better approach would be to display it on your page somewhere! This article can teach you the basics of what is involved there: https://www.kirupa.com/html5/modifying_dom_elements.htm (The entire section on the DOM (https://www.kirupa.com/javascript/learn_javascript.htm) . may be helpful if this is your first foray into this part of web development :slight_smile: