Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation 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
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    Dec 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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..

    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();
    }
    Go it working by changing to:
    Code:
    function randomContent() {
    	var index = Math.ceil(Math.random() * 3);
    	var mainContent = document.getElementById("mainContent");
    	var randomImg = "images/content" + index + ".png";
    	mainContent.src = randomImg;
    }
    Last edited by Vrutin; 12-05-2012 at 09:08 PM.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    VERY WRONG:
    Code:
    var index = Math.round(Math.random()*3);
    if(index == 0)
    {
        index = Math.round(Math.random()*3);
    }
    RIGHT:
    Code:
    var numberOfImages = 3; // or however many you have
    var index = 1 + Math.floor( Math.random() * numberOfImages );
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    Dec 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks For the advice..


  •  

    Posting Permissions

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