JavaScript global variable in function and .hover

Question

I have this code in JavaScript:

status = document.getElementById('status2');

$('#slider > img').hover(
    function() {
        stopLoop();
        status.innerHTML = "paused";
    }, 
    function() {
        startSlider();
        status.innerHTML = "playing";
    }
);

where I look for all the images in my html that have the id slider and when I hover on then I want to add a word (paused or playing) to a span tag that has the id status2. But I don't know why the global variable is not working, the only way that I make it work is putting a local variable inside each funcion like this:

function() {
    stopLoop();
    var status = document.getElementById('status2');
    status.innerHTML = "paused";
},
function() {
    startSlider();
    var status = document.getElementById('status2');
    status.innerHTML = "playing";
}

Can anyone me why?

NOTE: as I said before all works with the local variables but not setting it as a global variable.

Answer 1

Because by the time you run

status = document.getElementById('status2');

DOM was not ready so you get status as undefined and so it wont work further.

So either put the code in ready

$(document).ready(function(){
   //code goes here
})

or

Put the script at the end of file.

Answer 2

Do add in a

$(document).ready(function(){

});

This waits to execute the code inside until everything has finished loading. That way it shouldn't return undefined.

ALSO

I couldn't help but noticing that you seem to be trying to give multiple items the same ID.

Don't use IDs for multiple elements. That's not how they are designed to be used, nor do they work that way.If you give multiple elements the same ID and then try and style them with CSS, it'll only style the first one. Use a class. If you use

document.getElementById();

to try and grab multiple elements with the same ID, then the script will ONLY grab the FIRST element with that ID, because, given that it is an ID, it expects only one element. If you want to work with multiple elements, use a class, and then use

document.getElementsByClassName();

this will grab ALL elements with that class. So for example, say you have four span elements with the class "foo". To grab all these and change the text, do this:

 elements=document.getElementsByClassName("foo");
for (i=0; i<elements.length; i++){
elements[i].innerHTML='insert your text here';
}

About global and local variables, a GLOBAL variable is declared this way:

global_variable='foo'

and a local variable is declared this way:

var local_variable='foo'

a Global variable can be declared anywhere in the script and be used anywhere inside the script(and even in other scripts that are attached to the same HTML file ), whereas a Local variable, if declared inside the function, can only be used inside the function, or if you declare it outside the function, it can't be accessed within the function unless you pass the variable to it.

Hope that helps!