changing variable inside a function

Question

I'm trying to change src attribute of an image then restore the default value using setInterval()method but it seems that if I use the variable inside the function it doesn't work properly and It must be outside the function, why the variable value wont change inside the function?

var Img1 = document.getElementById('img1');

setInterval(function(){
    var boolean= true;
    if(boolean){
        Img1.src = "pic1.jpg";
        }else{
        Img1.src = "default.jpg";
    }
    boolean= !boolean;
} , 3000);



// This one work properly!

var Img1 = document.getElementById('img1');
var boolean= true;

setInterval(function(){

    if(boolean){
        Img1.src = "pic1.jpg";
        }else{
        Img1.src = "default.jpg";
    }
    boolean= !boolean;
} , 3000);

Because you're redeclaring it every time you run the function. The very first line in your function is boolian = true so it's going to set it to true. — Mike Cluck
– Mike Cluck, Commented Aug 3, 2016 at 20:44
@4castle that seems to just always set boolean to 0, am I missing something? — Rob M.
– Rob M., Commented Aug 3, 2016 at 20:57
@RobM. Whoops, my Java is bleeding into JavaScript. It would just flip back and forth between 1 and 0. (for this purpose though, that would still work as a boolean) So the shortest would be boolean ^= 1; — castletheperson
– castletheperson, Commented Aug 3, 2016 at 20:59

Duly Kinsky · Accepted Answer · 2016-08-03 21:11:18Z

1

That is because boolean is always true whenever the function get called. That is the first thing the function does, set boolean to true:

var boolean= true;

boolean does not get modified inside the function until after you check to see which src to choose. Thus, your condition always arrive to the same outcome, which is to set Img.src to pic1.jpg. Hope that helps!

edited Aug 3, 2016 at 21:11

answered Aug 3, 2016 at 20:58

Duly Kinsky

1,0069 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

faruh.paerhati · Accepted Answer · 2016-08-03 21:02:48Z

Within the function sent to setInterval(), you are setting "boolean" to be true at the start of every iteration of the function. Thus the following code will always set Img1.src = "pic1.jpg"; and the line Img1.src = "default.jpg"; will never get run because "boolean" is true in every case of the iteration.

setInterval(function(){
    var boolean= true;
    if(boolean){
        Img1.src = "pic1.jpg";
    }else{
        Img1.src = "default.jpg";
    }
    boolean= !boolean;
} , 3000);

You want to wrap your setInterval in a function so that you can modify the boolean value per iteration and that the value setDefault is scoped to the caller. For instance:

const IMAGE_DEFAULT = "default.jpg";
const IMAGE_PIC1 = "pic1.jpg";

function StartImageInterval(img) {
    var setDefault = true;

    setInterval(function() {
        img.src = ((setDefault) ? IMAGE_DEFAULT : IMAGE_PIC1);
        setDefault = !setDefault;
    }, 3000);
}

You should then be able to call this function with

var Img1 = document.getElementById('img1');
StartImageInterval(Img1);

Collectives™ on Stack Overflow

changing variable inside a function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related