JSFiddle - React, Tailwind, and code Playground
HTML
<div id = "displayImage"></div>
<div id = "number"></div>
<button id="nextBtn">next</button><button id="resetBtn">reset</button>
JavaScript
var RandomGenerator = function (myImages, numbersFrom, numbersTo){
this.numbersFrom = numbersFrom?numbersFrom:4;
this.numbersTo = numbersTo?numbersTo:10;
this.images = myImages;
this.temp = myImages.slice(0);
this.nextImage = function(){
if(this.temp.length === 0 ) return null;
var i = Math.floor(Math.random() * this.temp.length);
var toReturn = this.temp[i];
this.temp.splice(i,1);
return toReturn;
}.bind(this);
this.reset = function(){
this.temp = this.images.slice(0);
this.initializeNumbers();
}.bind(this);
this.initializeNumbers = function(){
console.log((this.numbersFrom - this.numbersTo)+1)
this.numbers = new Array((this.numbersTo - this.numbersFrom )+1);
var i=0;
for(i = 0; i< this.numbers.length;i++){
this.numbers[i]=this.numbersFrom+i;
}
}.bind(this);
this.nextNumber = function(){
if(this.numbers.length === 0 ) return null;
var i = Math.floor(Math.random() * this.numbers.length);
var toReturn = this.numbers[i];
this.numbers.splice(i,1)
return toReturn;
}.bind(this);
this.next = function(){
return {
"image" : this.nextImage(),
"number" : this.nextNumber()
};
}.bind(this);
//initialize the randomNumbers Array.
this.initializeNumbers();
}
var generator = new RandomGenerator(["media/1.jpg","media/2.jpg","media/3.jpg","media/4.jpg"]);
document.getElementById("nextBtn").onclick=function(){
var next = generator.next();
if(next.image === null) {
alert("images are finished");
return;
}
...