setInterval runs only 1 time, why?

**Nut_case** · 07-17-2010, 08:21 AM

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.

**DaiLaughing** · 07-17-2010, 08:25 AM

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.

**JMRKER** · 07-17-2010, 09:06 AM

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>

**DaiLaughing** · 07-17-2010, 10:46 AM

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.

**JMRKER** · 07-17-2010, 11:08 AM

Originally Posted by DaiLaughing

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?

**Sterling Isfine** · 07-17-2010, 11:48 AM

Originally Posted by Nut_case

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.

Thread: setInterval runs only 1 time, why?

Thread Tools

Display

setInterval runs only 1 time, why?

Consider this ...

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions