JavaScript generate random numbers without repeati

Question

I have some code where I have an array of x amount of items. In this case, videos, and I want to randomly call a video, however if the current video already called is the same as the random number I want it to generate another random number until it's unique.

Here's my code:

var videoLinks = [
    ['<iframe id="vid" src="https://www.youtube.com/embed/nYm2G4MnSkY?autoplay=1" frameborder="0" allowfullscreen></iframe>'],
    ['<iframe id="vid" src="https://www.youtube.com/embed/wAgZVLk6J4M?autoplay=1&start=5&end=45" frameborder="0" allowfullscreen></iframe>'],
    ['<iframe id="vid" src="https://www.youtube.com/embed/ix9wpslKwBE?autoplay=1" frameborder="0" allowfullscreen></iframe>'],
    ['<iframe id="vid" src="https://www.youtube.com/embed/OJJ-iLsQOPc?autoplay=1&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>'],
    ['<iframe id="vid" src="https://www.youtube.com/embed/rore790l_sk?autoplay=1&start=12&end=94" frameborder="0" allowfullscreen></iframe>'],
];

var randomNumber = function () {
    var getRandomNumber = Math.floor(Math.random() * 5);
    var random = videoLinks[getRandomNumber]
    document.getElementById("videoWrapper").innerHTML = random[0];
};

randomNumber(); // To call the function on load

Answer 1

You can create an array to keep the exiting generated numbers.

var existingNumbers = [];
var maxNumbers = 5;
var randomNumber = function() {
  if (existingNumbers.length != maxNumbers) {
    do {
      getRandomNumber = Math.floor(Math.random() * maxNumbers);
    } while (existingNumbers.indexOf(getRandomNumber) > -1);
    existingNumbers.push(getRandomNumber);
   
    var random = videoLinks[getRandomNumber]
    document.getElementById("videoWrapper").innerHTML = random[0];
  }
};

Answer 2

randojs.com makes this simple:

var sequence = randoSequence(videoLinks);

Then, you can loop through videoLinks to get the values in random order. Here's how you get the first random value:

sequence[0].value

When you run out, just generate a new sequence if needed.

You just need to add the following to the head of your html document, and you can do pretty much whatever you want with randomness easily. Random numbers, random values from arrays, random jquery elements, random properties from objects, and even preventing repetitions as I've shown here.

<script src="https://randojs.com/1.0.0.js"></script>

Answer 3

First of all, why do you wrap all those strings in Arrays? I dropped them in my solution below. Anyway, easiest and cleanest solution is to clone the Array, and drop the selected URL from the new Array.

var videoLinks = [
    '<iframe id="vid" src="https://www.youtube.com/embed/nYm2G4MnSkY?autoplay=1" frameborder="0" allowfullscreen></iframe>',
    '<iframe id="vid" src="https://www.youtube.com/embed/wAgZVLk6J4M?autoplay=1&start=5&end=45" frameborder="0" allowfullscreen></iframe>',
    '<iframe id="vid" src="https://www.youtube.com/embed/ix9wpslKwBE?autoplay=1" frameborder="0" allowfullscreen></iframe>',
    '<iframe id="vid" src="https://www.youtube.com/embed/OJJ-iLsQOPc?autoplay=1&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>',
    '<iframe id="vid" src="https://www.youtube.com/embed/rore790l_sk?autoplay=1&start=12&end=94" frameborder="0" allowfullscreen></iframe>'
];
var temp = videoLinks.slice();

function randomVideo(){
  var r = Math.floor(Math.random()*temp.length);
  return temp.splice(r, 1);
}

Answer 4

use a variable to check if the number is the same.

something like this: (using LastNumber to store the lastNumber) if it allready is used we gonna try again)

var videoLinks = [
    ....
];

var lastNumber = 0;
var randomNumber = function () {
    var getRandomNumber = Math.floor(Math.random() * 5);  
    if(getRandomNumber != lastNumber){
        var random = videoLinks[getRandomNumber];
        document.getElementById("videoWrapper").innerHTML = random[0];
        lastNumber = getRandomNumber;
    }else{
        randomNumber();
    }
};

randomNumber(); // To call the function on load