CODEWITHSUNDEEP
javascriptjqueryhtml
Janice
Janice

Reputation: 13

Randomly select from remaining images inside the array while current image is displayed

I am required to create a webpage displaying an image which will be replaced with another image in 2 seconds. Total of 3 images inside the array. However, when the current image is displayed, my random function should only allow to select from remaining images inside the array and replace the current image after 2 seconds.

I am able to randomise images inside the entire array but not able to randomise from the remaining images. Need help in this. Thanks.

$(function(){
	//prepare Your data array with img urls
	var dataArray=new Array();
	dataArray[0]="cat2.jpg";
	dataArray[1]="cat3.jpg";
	dataArray[2]="cat1.jpg";

	//start with id=0 after 2 seconds
	var thisId=0;

	window.setInterval(function(){
	var randomNum = Math.floor(Math.random() * dataArray.length);
	document.getElementById("thisImg").src = dataArray[randomNum];
	},2000); 
});
<!DOCTYPE html>
<html>
<head>
	<title>Task 2</title>
	
	<!-- calling external js file -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<img id="thisImg" alt="img" src="cat1.jpg"/>
	<script src ="Task2.js"></script>
</body>
</html>

Upvotes: 0

Views: 49

Answers (3)

dporechny
dporechny

Reputation: 646

Try this approach, just filter your images before choosing next one and pick random.

const numbers = [1,2,3,4,5]
let currentNumber = 1;

const run = (numbers, cn) => {
  setInterval(() => {
    const filtered = numbers.filter(num => num !== cn);
    const random = filtered[Math.floor(Math.random() * filtered.length)]
    // here set background to random
    console.log(`
      Current: ${cn}
      Filtered: ${filtered}
      Next: ${random}
    `)
    cn = random;
  }, 3000)
}

run(numbers, currentNumber)

Upvotes: 2

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11096

I use thisId as a placeholder for current image ID. Everytime you generate a random number, you can compare it against thisId and change it if equals to thisId. Then set thisId=randomNum again for next loop.

$(function(){
    var thisId=0;
    //prepare Your data array with img urls
    var dataArray=new Array();
    dataArray[0]="cat2.jpg";
    dataArray[1]="cat3.jpg";
    dataArray[2]="cat1.jpg";

    window.setInterval(function(){
        var randomNum = Math.floor(Math.random() * dataArray.length);

        if (thisId==randomNum){randomNum++;};
        if (randomNum==3){randomNum=0};
        thisId=randomNum;

        document.getElementById("thisImg").src = dataArray[randomNum];
    },2000); 
});

Upvotes: 0

ellipsis
ellipsis

Reputation: 12152

Splice the used image source from the array

$(function(){
	//prepare Your data array with img urls
	var dataArray=new Array();
	dataArray[0]="cat2.jpg";
	dataArray[1]="cat3.jpg";
	dataArray[2]="cat1.jpg";

	//start with id=0 after 2 seconds
	var thisId=0;

	var a=window.setInterval(function(){
	var randomNum = Math.floor(Math.random() * dataArray.length);
  if(typeof dataArray[randomNum]==="undefined")
  { clearInterval(a);}
	document.getElementById("thisImg").src = dataArray[randomNum];
  dataArray.splice(randomNum,1);
  
	},2000); 
});
<!DOCTYPE html>
<html>
<head>
	<title>Task 2</title>
	
	<!-- calling external js file -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<img id="thisImg" alt="img" src="cat1.jpg"/>
	<script src ="Task2.js"></script>
</body>
</html>

Upvotes: 0

Related Questions