CODEWITHSUNDEEP
javascript
Mohammed Hanafy
Mohammed Hanafy

Reputation: 433

A simple javaScript code that dosen't work @_@

OK, here is the thing, I wrote a simple code for a slide show, it works and it's as I expected and that's it:

var slideShowImage = document.getElementById("slideShowImage");
var images = ["_Images/Image_01.jpg","_Images/Image_02.jpg","_Images/Image_03.jpg","_Images/Image_04.jpg","_Images/Image_05.jpg","_Images/Image_06.jpg","_Images/Image_07.jpg"];
var imageIndex = 0;

function changeImage (){
    slideShowImage.setAttribute ("src",images[imageIndex]);
    imageIndex++;
    if (imageIndex >= images.length){
            imageIndex = 0;
        }   
    }
    
setInterval (changeImage,3000);

But as I'm still learning JavaScript I thought to change the logic to taste myself, and I rewrote the code, but it doesn't work, I have no idea why... Hopefully someone can enlighten me with why it doesn't...

var imageId = document.getElementById("slideShowImage");
var imageNumber = 1;
var imageName = "_Images/Image_0"+imageNumber+".jpg";

function changeImage (){
    imageId.setAttribute("Src",imageName);
    imageNumber++;
    if (imageNumber==7){
        imageNumber=1;
        }
    }
setInterval(changeImage,1000);

Upvotes: -1

Views: 87

Answers (5)

Naren Sisodiya
Naren Sisodiya

Reputation: 7288

in second approach the var imageName is assigned to a static value i.e "_Images/Image_0"+imageNumber+".jpg", as per the first answer you need to recalculate the value of this variable.

instead you can write imageName as function which returns the calculated value

var imageName = function(){ return "_Images/Image_0"+imageNumber+".jpg"; }

and call inside changeImage

function changeImage (){
    imageId.setAttribute("Src",imageName());
    imageNumber++;
    if (imageNumber==7){
        imageNumber=1;
        }
    }

Upvotes: 2

aymankoo
aymankoo

Reputation: 671

you can replase your code imageId.setAttribute("Src",imageName); with the follwoing imageId.src = imageName;

Upvotes: -1

Sébastien Renauld
Sébastien Renauld

Reputation: 19672

The error you've made is that the image name in your version is not evaluated once per iteration.

var imageId = document.getElementById("slideShowImage");
var imageNumber = 1;
setInterval(function() {
  imageId.setAttribute("src","_Images/Image_0"+imageNumber+"jpg");
  imageNumber++;
  if (imageNumber == 7) imageNumber = 1;
},1000);

This will result in your code actually working. I took the image path and brought it in the function so it gets evaluated on each iteration, which was the main bug.

Bear in mind, your images will not load instantly; Setting them to 1s per transition is unwise. In practice, you want to preload all of them in the background somewhere invisible, which guarantees instant recall.

Upvotes: 0

Chris
Chris

Reputation: 518

Your imageName variable is never being updated. You have to update it on each chageImage call.

var imageId = document.getElementById("slideShowImage");
var imageNumber = 1;
var imageName = "_Images/Image_0"+imageNumber+".jpg";

function changeImage (){
    imageNumber++;
    imageName = "_Images/Image_0"+imageNumber+".jpg";
    imageId.setAttribute("Src",imageName);
    if (imageNumber==7){
        imageNumber=1;
    }
}
setInterval(changeImage,1000);

Upvotes: 0

drquicksilver
drquicksilver

Reputation: 1635

var imageName = "_Images/Image_0"+imageNumber+".jpg";

You need to update imageName each time the number changes. Otherwise this string is fixed to Image_01.jpg.

Upvotes: 0

Related Questions