Using an array element only once

Question

I am new to JavaScript and I would like to get three random elements out of my array, which need to be different. I already managed to get three different elements, then I tried to take one element only once via the split method. But apparently this doesn't really work, there are probably a lot of mistakes since this is one of my first scripts. Also it sometimes says "undefined".

http://jsfiddle.net/t4mtpm50/

HTML:

<span id="tot1"></span>, <span id="tot2"> und </span> und <span id="tot3"></span>

Javascript:

function getNumber() {
    random = Math.floor(Math.random() * students.length);
    students.splice(random,1);
    return random;
}

students = new Array("Paul", "Jan", "Fabian D.", "Fabian K.", "Lennard", 
                            "Robin", "Angelique", "Joyce", "Sarah", "Ajlin",
                            "Enes", "Leon", "Boran", "Joshua")    

getNumber();
tot1 = students[random];
getNumber();
tot2 = students[random];
getNumber();
tot3 = students[random];

document.getElementById('tot1').innerHTML = tot1;
document.getElementById('tot2').innerHTML = tot2;
document.getElementById('tot3').innerHTML = tot3;

tot1 = students[random] when that statement hits, random is undefined. random is a local variable inside the getNumber function but once that function exits, that local variable is no longer accessible. Should be tot1 = students[getNumber()]; or var RandomNumber = getNumber(); tot1 = students[RandomNumber]; — frenchie, Nov 23 '14 at 16:45
@frenchie Without a `var` or similar keyword to declare `random` as local, it will leak out as a global. http://stackoverflow.com/questions/1470488/ — Jonathan Lonowski, Nov 23 '14 at 17:03
normally you access `return` variables like this: `var my_return_var = getNumber();` like @JonathanLonowski mentioned, your vars behave like global vars which can easily lead to problems in larger codes. — low_rents, Nov 23 '14 at 17:10
Welcome to StackOverflow! Please see ["Should questions include “tags” in their titles?"](http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-their-titles), where the consensus is "no, they should not". — , Nov 23 '14 at 17:43

Jonathan Lonowski · Accepted Answer · 2014-11-23T17:36:14.223

By using .splice(), the randomly selected name is actually being removed before it's retrieved, making random instead refer to the next name in the collection:

var students = [ "Paul", "Jan", "Fabian D." ];
var random = 1;

console.log(students[random]); // "Jan"

students.splice(random, 1);

console.log(students);         // [ "Paul", "Fabian D." ]
console.log(students[random]); // "Fabian D."

The "it sometimes says 'undefined'" happens when random tries to refer to the last element:

var students = [ "Paul", "Jan", "Fabian D." ];
var random = 2;

console.log(students[random]); // "Fabian D."

students.splice(random, 1);

console.log(students);         // [ "Paul", "Jan" ]
console.log(students[random]); // undefined, random is now out-of-bounds at 2

You could put to use the return value of .splice(), which is a collection of the removed elements, redefining getNumber() to instead return an element rather than an index:

function getStudent() {
    var random = Math.floor(Math.random() * students.length);
    return students.splice(random, 1)[0]; // return the 1st and only removed element
}

var tot1 = getStudent(); // "Fabian D."
var tot2 = getStudent(); // "Enes"
var tot3 = getStudent(); // "Joyce"

http://jsfiddle.net/6gox6L1t/

you simultaneously nearly got the same idea :-) – low_rents Nov 23 '14 at 17:38 — low_rents, Nov 23 '14 at 17:38
Thank you too! Seems to be a better solution. – Simon Mathewson Nov 23 '14 at 17:44 — Simon Mathewson, Nov 23 '14 at 17:44

low_rents · Answer 2 · 2014-11-23T17:54:35.093

5

I think this would be a nicer, cleaner and shorter solution:

function getStudent(students) {
    var random = Math.floor(Math.random() * (students.length));
    var my_student = students.splice(random,1);
    return my_student;
}

var students = new Array("Paul", "Jan", "Fabian D.", "Fabian K.", "Lennard", 
                            "Robin", "Angelique", "Joyce", "Sarah", "Ajlin",
                         "Enes", "Leon", "Boran", "Joshua");


document.getElementById('tot1').innerHTML = getStudent(students);
document.getElementById('tot2').innerHTML = getStudent(students);
document.getElementById('tot3').innerHTML = getStudent(students);

you pass the current students-array to the getStudent() function so you avoid having global variables in your script. splice returns the element removed, so you got your student-name there and return it.

edit2: I was wrong about the -1 on the .length. 1 is an exclusive result of Math.random(), so you have been right with that.

http://jsfiddle.net/northkildonan/38rf42f7/1/

edit: this method completely avoids using global variables in your script.

edited Nov 23 '14 at 17:54

answered Nov 23 '14 at 17:36

low_rents

4,481
3
27
55

Thanks a lot! This seems to be the cleanest and easiest way possible – Simon Mathewson Nov 23 '14 at 17:43
1

Using `Math.random() * (students.length - 1)` means that the last item in the array can never be picked. – Phylogenesis Nov 23 '14 at 17:44
@Phylogenesis oh, yes that's right, thank you! 1 is exclusive in `Math.random()`, just read that. so this was not the reason for his "undefined" errors. – low_rents Nov 23 '14 at 17:52
1

The reason for his `undefined` errors was because he was returning an index that represented the element he removed from the array. – Phylogenesis Nov 23 '14 at 17:54
@Phylogenesis ya right, so Jonathan had the right answer. – low_rents Nov 23 '14 at 17:56
@northkildonan no you were right , using whole length will result in a random number including length max number which doesnt exist as index. – ProllyGeek Nov 23 '14 at 18:45
@Phylogenesis you are wrong by the way , try yourself. – ProllyGeek Nov 23 '14 at 18:45
@ProllyGeek `Math.random()` returns a number in the range 0 (inclusive) to 1 (exclusive) [as per the documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random). This means that with a 10-element `Array`, the above code would return a number between 0 and 8 and would have no way to return the last element. – Phylogenesis Nov 23 '14 at 19:15
@Phylogenesis will Math.random() return 1 or not ? – ProllyGeek Nov 23 '14 at 19:19
1

@ProllyGeek It won't. – Phylogenesis Nov 23 '14 at 19:32
@Phylogenesis try removing -1 from my answer , and count how many times will it produce 14 ( array length is 14 ). – ProllyGeek Nov 23 '14 at 19:49
@Phylogenesis and it depends on what you are using ceil or floor , in my case im using ceil. – ProllyGeek Nov 23 '14 at 19:50
@Phylogenesis so if you wanna remove -1 just use floor! – ProllyGeek Nov 23 '14 at 19:51
@ProllyGeek but it should not return 14! if an array got the length of 14, its index range is from 0 to 13 ! – low_rents Nov 23 '14 at 19:51
@northkildonan it will not return 14 !! the conflict here is that i used ceil , so i added the -1 , could simply use floor as well. – ProllyGeek Nov 23 '14 at 19:54
@northkildonan your answer is correct if you are using floor , it is simple. – ProllyGeek Nov 23 '14 at 19:55

ProllyGeek · Answer 3 · 2014-11-23T17:07:59.623

3

try this :

 students = new Array("Paul", "Jan", "Fabian D.", "Fabian K.", "Lennard",                   "Robin", "Angelique", "Joyce", "Sarah", "Ajlin",
"Enes", "Leon", "Boran", "Joshua")    


var arr = []
while(arr.length < 3){
  var randomnumber=Math.ceil(Math.random()*students.length-1)
  var found=false;
  for(var i=0;i<arr.length;i++){
    if(arr[i]==randomnumber){found=true;break}
  }
  if(!found)arr[arr.length]=randomnumber;
}
console.log(arr.valueOf());

tot1 = students[arr[0]];

tot2 = students[arr[1]];

tot3 = students[arr[2]];

document.getElementById('tot1').innerHTML = tot1;
document.getElementById('tot2').innerHTML = tot2;
document.getElementById('tot3').innerHTML = tot3;

please note that length should be decrmented by 1 , because index starts at 0.

http://jsfiddle.net/t4mtpm50/6/

edited Nov 23 '14 at 17:07

answered Nov 23 '14 at 16:48

ProllyGeek

15,517
9
53
72

2

The code does not even try to prevent the occurrence of a name more than once. – Jukka K. Korpela Nov 23 '14 at 16:58
@JukkaK.Korpela ok im sorry , fixed my answer. – ProllyGeek Nov 23 '14 at 17:08
Thanks a lot, this seems to work. Could you maybe tell me how exactly this works? I don't really get it :) – Simon Mathewson Nov 23 '14 at 17:14
1

@SimonMathewson the algorithm is really simple , i created an empty array and set the length to 3 ( count of how many different random numbers you want ) , created a loop where random numbers are generated , when a number is generated it iterated the array to check if similar number was created before , if so it will generate new number ,and so on , till no similar number is found , finally use the array elements to refer to your original array. if my answer is correct please mark it as correct one. – ProllyGeek Nov 23 '14 at 17:18

score 1 · Answer 4 · edited May 23 '17 at 11:52

Another option is to shuffle the whole list of students and then pick the first three from the shuffled set. (The shuffle function here is adapted from https://stackoverflow.com/a/6274398/567595.)

function shuffle(array) {
    var i, temp, j;
    for (i = array.length; i; i--) {
        j = Math.floor(Math.random() * i);
        temp = array[i - 1];
        array[i - 1] = array[j];
        array[j] = temp;
    }
}
students = ["Paul", "Jan", "Fabian D.", "Fabian K.", "Lennard", 
                            "Robin", "Angelique", "Joyce", "Sarah", "Ajlin",
                            "Enes", "Leon", "Boran", "Joshua"];
shuffle(students);
document.getElementById('tot1').innerHTML = students[0];
document.getElementById('tot2').innerHTML = students[1];
document.getElementById('tot3').innerHTML = students[2];

http://jsfiddle.net/4o897kwa/1

Using an array element only once

4 Answers4