www.webdeveloper.com
Results 1 to 3 of 3

Thread: How to change to new image everytime..

Hybrid View

  1. #1
    Join Date
    Dec 2012
    Posts
    2

    Talking 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.

  2. #2
    Join Date
    Jan 2010
    Posts
    77
    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";
                                   }

  3. #3
    Join Date
    Dec 2012
    Posts
    2
    Quote Originally Posted by Vince616 View Post
    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();
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles