How to change to new image everytime..

This site is best viewed in a modern browser with JavaScript enabled.

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.

Vince616

Hi bud

As you have noticed that isn’t random in fact you will only ever get the first image, or maybe the second image due to where you increment your variable “index”

To display a random number you need to use the Math.random() object

Here is an edited version of your function if you notice I have put your “index” variable inside the function, you are not using it anywhere else so it is a good idea and good practice to keep your variables localised you could get rid of it all together but I didn’t want to butcher your code too much

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

You need to remember that when you are dealing with random or even in this case pseudo random numbers it is possible and very likely that the same number will appear a couple of times in a row

Here is a slightly less verbose version

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

Vrutin

Vince616;1238367 wrote:
Hi bud

As you have noticed that isn’t random in fact you will only ever get the first image, or maybe the second image due to where you increment your variable “index”

To display a random number you need to use the Math.random() object

Here is an edited version of your function if you notice I have put your “index” variable inside the function, you are not using it anywhere else so it is a good idea and good practice to keep your variables localised you could get rid of it all together but I didn’t want to butcher your code too much
function randomContent() {
        var numImages=10;
        var index= Math.ceil(Math.random()*numImages);
	var mainContent = document.getElementById("mainContent");
	var randomImg="images/content" + index + ".png";
	mainContent.src=randomImg;
}
You need to remember that when you are dealing with random or even in this case pseudo random numbers it is possible and very likely that the same number will appear a couple of times in a row

Here is a slightly less verbose version
         function randomContent(){
       document.getElementById("mainContent").src="images/content"+Math.ceil(Math.random()*10)+".png";
                               }
 

Hey Thanks, I later on decided to something similar to what you d

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();
}