How to change to new image everytime..

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:

Code:

---

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.

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

Code:

---

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

Code:

---

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

---

Quote:

---

Originally Posted by 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

Code:

---

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

Code:

---

        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

Code:

---

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

---