Local vs. global variables in javascript

Question

I'm very new to coding and i'm trying to understand the difference between local and global variables. I was trying to create an image gallery where you could switch image by pressing buttons. I got it to work by putting the image variables inside the functions as a local variables. But if i put it outside of the function as one, global variable it wouldn't work. Why is that?

Here is my html:

<button onclick="previous_image();"></button>
<img src="image1.jpg" alt="Image gallery" id="image"/>
<button onclick="next_image();"></button>

Here is my Javascript when i got it to work:

var image_tracker = "a";

function previous_image(){
    var image = document.getElementById("image");
    switch(image_tracker){
        case("a"): 
            image.src = "image3.jpg";
            image_tracker = "c";    
            break;

        case("c"): 
            image.src = "image2.jpg";
            image_tracker = "b";    
            break;

        case("b"): 
            image.src = "image1.jpg";
            image_tracker = "a";    
            break;
    }

}

function next(){
    var image = document.getElementById("image");
    switch(image_tracker){
        case("a"): 
            image.src = "image2.jpg";
            image_tracker = "b";    
            break;

        case("b"): 
            image.src = "image3.jpg";
            image_tracker = "c";    
            break;

        case("c"): 
            image.src = "image1.jpg";
            image_tracker = "a";    
            break;
    }

}

Here is my javascript when it didn't work:

var image_tracker = "a";
var image = document.getElementById("image"); 

function previous_image(){
    switch(image_tracker){
        case("a"): 
            image.src = "image3.jpg";
            image_tracker = "c";    
            break;

        case("c"): 
            image.src = "image2.jpg";
            image_tracker = "b";    
            break;

        case("b"): 
            image.src = "image1.jpg";
            image_tracker = "a";    
            break;
    }

}

function next(){
    switch(image_tracker){
        case("a"): 
            image.src = "image2.jpg";
            image_tracker = "b";    
            break;

        case("b"): 
            image.src = "image3.jpg";
            image_tracker = "c";    
            break;

        case("c"): 
            image.src = "image1.jpg";
            image_tracker = "a";    
            break;
    }

}

Maybe your elements are not ready when you try to select them? Try `window.onload` function wrapper or put your code to the very end of `` — Justinas, Oct 21 '16 at 09:37
`var image = document.getElementById("image");` is executed before the image exists. Inside the function it does because you execute the function after the image object exists in the DOM. You can solve it by doing `var image; window.onload=function() { image = document.getElementById("image"); }` - on another note also add `type="button"` to your buttons. Some browsers would submit the page — mplungjan, Oct 21 '16 at 09:38
1- Your document have to be ready to be able to selected elements from the DOM. 2- You have to call your function after defining all used variables in the function. — Amani Ben Azzouz, Oct 21 '16 at 09:40
just to point out for posterity - this got closed as a duplicate, even though it _wasn't_ (at least to me). this wasn't actually about scope, it was about the DOM not being loaded in time. the scoping issue was just symptomatic of the underlying misunderstanding. — strugee, Oct 21 '16 at 10:00
Ups, i did that by a mistake @strugee . Quite new to this forum. Anyway to get it back to not a duplicate? — Bjørge Bentsen Veholmen, Oct 21 '16 at 10:17
great question! I actually don't know the answer offhand; you should [ask on meta.SO](http://meta.stackoverflow.com/questions/ask) (I already searched for duplicates for you). I'm pretty sure you should have the rep to ask a question, but if you don't I'm happy to ask for you. — strugee, Oct 22 '16 at 08:48

score 1 · Accepted Answer · answered Oct 21 '16 at 09:45

1

Use something like this:

window.onload = function() {
  var image = document.getElementById("image");
};

answered Oct 21 '16 at 09:45

gschambial

1,383
2
11
22

Identical to my comment. – mplungjan Oct 21 '16 at 09:52
well, thank you to mplungjan! Didn't know i had to set the type to button. – Bjørge Bentsen Veholmen Oct 21 '16 at 10:16

score 0 · Answer 2 · edited Oct 21 '16 at 09:55

0

I think the reason of your second code not working because this line

var image = document.getElementById("image");

is running before the DOM is loaded.

If you need to use plain javascript, you may add that line in myFunction

body onload="myFunction()"

to load after DOM is loaded.

edited Oct 21 '16 at 09:55

xenteros

15,586
12
56
91

answered Oct 21 '16 at 09:45

Label

9

No. No need to use inline code. – mplungjan Oct 21 '16 at 09:53

Local vs. global variables in javascript

2 Answers2