www.webdeveloper.com
Results 1 to 6 of 6

Thread: setInterval runs only 1 time, why?

  1. #1
    Join Date
    Feb 2006
    Posts
    3

    setInterval runs only 1 time, why?

    i have this code:

    Code:
    <script>
    setInterval(function() {SwitchPic()}, 4000); 
            function SwitchPic() {
            var picture = document.getElementById("imgswitch");
            if (picture.src.indexOf('1')) {
                picture.src = "IMG/pic2.jpg";
                }
            else if (picture.src.indexOf('2')) {
                picture.src = "IMG/pic3.jpg";
                }
            else if (picture.src.indexOf('3')) {
                picture.src = "IMG/pic4.jpg";
                }
            else if (picture.src.indexOf('4')) {
                picture.src = "IMG/pic5.jpg";
                }
            else if (picture.src.indexOf('5')) {
                picture.src = "IMG/pic1.jpg";
                }
            }
    </script>
    the picture does change from pic1 to pic2 and thats it, it doesnt run any further...

    Please help me.

  2. #2
    Join Date
    Jul 2009
    Posts
    91
    Try popping some alerts in there to see where the code goes or doesn't. Maybe include the the values you are using to check they are what you expect.

    I would suggest using alt atrributes rather than the src attributes to identify which picture is there. You should use ALT anyway on images and you can then do a simple "IF alt tag equals 'pic1'" rather than just looking for the number 1 or 2 somewhere in the name.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356

    Lightbulb Consider this ...

    Why bother with the IF logic?
    See if this works for your needs...
    Code:
    <html>
    <head>
    <title>Sequenced Image Rotation</title>
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?t=232936
    
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgList = [
        '11.jpg','12.jpg','13.jpg','14.jpg','15.jpg',
        '21.jpg','22.jpg','23.jpg','24.jpg','25.jpg',
        '31.jpg','32.jpg','33.jpg','34.jpg','35.jpg',
        '41.jpg','42.jpg','43.jpg','44.jpg','45.jpg',
        '51.jpg','52.jpg','53.jpg','54.jpg','55.jpg'
    ];
    	
    var picNo = 0;
    function sequenceDisplay() {
      picNo++;
      picNo = (picNo % imgList.length);
      document.getElementById('pic').src = baseURL+imgList[picNo];
    }
    
    onload = function() {
      document.getElementById('pic').src = baseURL+imgList[picNo];
      setInterval(function() {sequenceDisplay()}, 4000);
    }
    
    </script>
    </head>
    <body>
    <img id="pic" src="">
    </body>
    </html>

  4. #4
    Join Date
    Jul 2009
    Posts
    91
    I was going with easy to understand Javascript which was the minimum to achieve what was needed and therefore might help learning. Yours is obviously a better solution (although perhaps not what was wanted) but a little harder to understand for a beginner.
    Last edited by DaiLaughing; 07-17-2010 at 10:50 AM.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356

    Arrow

    Quote Originally Posted by DaiLaughing View Post
    I was going with easy to understand Javascript which was the minimum to achieve what was needed and therefore might help learning. Yours is obviously a better solution (although perhaps not what was wanted) but a little harder to understand for a beginner.
    No problem ... let me know what part you don't understand (if still interested).

    Alternatively: What part did not meet your needs?

  6. #6
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by Nut_case View Post
    i have this code:

    [CODE]<script>
    setInterval(function() {SwitchPic()}, 4000);
    function SwitchPic() {
    var picture = document.getElementById("imgswitch");
    if (picture.src.indexOf('1')) {
    picture.src = "IMG/pic2.jpg";
    }
    Your tests are incorrect and will only evaluate false if the digit is the first character in the filename.
    If a character is not found, indexOf returns -1, which evaluates true.
    Y_U U_G_A_E_U_ B_S_A_D_

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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