CODEWITHSUNDEEP
javascriptrandom
Ryan
Ryan

Reputation: 3

Random Image Display, Without Repeat, with Javascript

I know there are already a few questions like this, but I just can't seem to apply any of the answers (this is my first time making anything like this at all). I currently have a page that, when a button is pushed, a random image appears (thanks to some of the great posts on here, this is actually working). My issue is, the random number has a lot of repeats prior all the images being seen. I am wanting to make it where all images are seen (in a random order) before any duplicates. This is what is in the body:

<form name="imageForm">
  <table border=3>
   <tr align="center">
    <td>
      <input onclick="displayImage();" type=button value="Click Here">
    </td>
  </tr>
  <tr>
    <td>
      <img src="blank.jpg" name="canvas" />
    </td>
  </tr>
  </table>
</form>

Here is the script:

<script language="javascript">

var imagesArray = [
'images/img-1.jpg',
'images/img-2.jpg',
'images/img-3.jpg',
'images/img-4.jpg',
'images/img-5.jpg',
];

function displayImage(){

    var num = Math.floor(Math.random() * (imagesArray.length));

    document.canvas.src = imagesArray[num];

    }

</script>

From what I have read, the way to do this would be to add a spice, and have shown images dropped into a new array, then once the original array equals 0, then have it reset. Try as I might, I have not been able to successfully integrate that into my code :( . This is what I ended up with (which does nothing, and breaks the function entirely):

<script>

var imagesArray = [
'images/img-1.jpg',
'images/img-2.jpg',
'images/img-3.jpg',
'images/img-4.jpg',
'images/img-5.jpg',
];

var shownImages = []

function displayImage(){

    var num = Math.floor(Math.random() * (imagesArray.length));
    document.canvas.src = imagesArray[num];

    shownImages.unshift(imagesArray.splice(num,num+1));

    if(images.length == 0){
     images.Array = shownImages;
     shownImages = [];

     return shownImages[0];

    }
</script>

Another method mentioned seemed to be to have a function that shuffled the images first, then displayed them in the shuffled order, then reshuffled and repeated, but I got even less far with that.

There also seems to be some question on whether the random number max should be imagesArray.length by itself, or +1 or -1. I am sure there are a number of other issues with this as well, but like I said, this is my first attempt. Any help is appreciated.

Upvotes: 0

Views: 7836

Answers (1)

Shreyas
Shreyas

Reputation: 1462

You should keep track of the numbers that you have generated, and if its a repeat then get a new number.

<script language="javascript">

var imagesArray = [
'images/img-1.jpg',
'images/img-2.jpg',
'images/img-3.jpg',
'images/img-4.jpg',
'images/img-5.jpg',
];

var usedImages = {};
var usedImagesCount = 0;

function displayImage(){

    var num = Math.floor(Math.random() * (imagesArray.length));
    if (!usedImages[num]){
        document.canvas.src = imagesArray[num];
        usedImages[num] = true;
        usedImagesCount++;
        if (usedImagesCount === imagesArray.length){
            usedImagesCount = 0;
            usedImages = {};
        }
    } else {
        displayImage();
    }
}

</script>

Upvotes: 1

Related Questions