Randomly select value form array and delete this v

Question

Trivial question. What I have so far http://jsfiddle.net/Dth2y/1/

Task, the next button should randomly select a value from the array and remove that value from the array. So far this called the getNames function, within this function the value randomly selected from the array should be removed too after being appended to the html.

HTML

<h1 id="name">Click Next To Start</h1> <button id="next">NEXT NAME</button> <button>SKIP NAME</button>

​

JS

     $(document).ready(function() {
     var names = [
         "Paul",
         "Louise",
         "Adam",
         "Lewis",
         "Rachel"
     ];

     function getNames() {
        return names[Math.floor(Math.random() * names.length)];

     }

             $("#next").click(function() {
                 $('#name').text(getNames())

     });
 });

​

I have seen similar questions using the splice method, I have tried to hack a version together but am wondering if there's a more efficient way.

Answer 1

You could instead randomly shuffle the array before-hand and then pop() the first element or shift() the last element.

/**
 * Shuffles an array in-place
 */
function shuffle(array) {
    for (var i = array.length-1; i > 0; --i) {
        // Select a random index 0 <= j <= i
        var j = Math.floor(Math.random() * (i+1));
        // Swap elements at i and j
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
}

$(document).ready(function() {
    var names = [
        "Paul",
        "Louise",
        "Adam",
        "Lewis",
        "Rachel"
    ];

    // Shuffle the names
    shuffle(names);

    $("#next").click(function() {
        // Grab the next name and remove it
        $('#name').text(names.pop());
    });
});

(The shuffle function is based on the Fisher-Yates shuffle algoritm. This post explains how it works.)

Answer 2

you will want to check this out: http://ejohn.org/blog/javascript-array-remove/

// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

here it is applied to your fiddle: http://jsfiddle.net/Dth2y/3/