How to change to new image everytime..

[Vrutin]

Hey, I have just started scripting JavaScript and I got stuck when I wanted to change everytime the page is reloaded to have a new image.

Here is my current script:

var index = 1;

function randomContent() {
	var mainContent = document.getElementById("mainContent");
	var randomImg="images/content" + index++ + ".png";
	mainContent.src=randomImg;
}

window.onload = function() {
	// Load Random Images
	randomContent();
}

It displays the first image. However, it doesn't change every-time to a new one.

[DanInMa]

the index will always be the same unless you save information somehow between page views. you could use a cookie ( http://www.tutorialspoint.com/javasc...pt_cookies.htm ) to record and use the information perhaps. This will work on a per user basis.

[Old Pedant]

You could also simply choose a random index value. It is then *possible* that a user will get the same image 2 times in a row, but the odds of that will only be 1 in N, where N is how many available images you have.

It's not perfect, but it's simpler and may work well enough.

[Vrutin]

Originally Posted by Old Pedant

You could also simply choose a random index value. It is then *possible* that a user will get the same image 2 times in a row, but the odds of that will only be 1 in N, where N is how many available images you have.

It's not perfect, but it's simpler and may work well enough.

Hey, I later on decided to do that ... its working as how I wanted, though I am getting some 0 when number is generated..

var index = Math.round(Math.random()*3);
if(index == 0)
{
    index = Math.round(Math.random()*3);
}

function randomContent() {
	var mainContent = document.getElementById("mainContent");
	var randomImg="images/content" + index + ".png";
	mainContent.src=randomImg;
}

window.onload = function() {
	// Load Random Images
	randomContent();
}

Go it working by changing to:

function randomContent() {
	var index = Math.ceil(Math.random() * 3);
	var mainContent = document.getElementById("mainContent");
	var randomImg = "images/content" + index + ".png";
	mainContent.src = randomImg;
}

[Old Pedant]

VERY WRONG:

var index = Math.round(Math.random()*3);
if(index == 0)
{
    index = Math.round(Math.random()*3);
}

RIGHT:

var numberOfImages = 3; // or however many you have
var index = 1 + Math.floor( Math.random() * numberOfImages );

[Vrutin]

Thanks For the advice..