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.

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 — vinayakj
– vinayakj, Commented Jul 21, 2015 at 21:27
You say you look for all the images with the id 'slider', but your code checks for images that are direct children of elements with the id 'slider'. Maybe this page explains it better? Images with id 'slider' are selected with $('img#slider'), while children that are images of elements with id 'slider' are selected with `$('#slider > img'). — FWDekker
– FWDekker, Commented Jul 21, 2015 at 21:29
If you want to, you can go full jQuery and use var status = $("status2"); and status.html("playing");. — Anders
– Anders, Commented Jul 21, 2015 at 21:31

vinayakj · Accepted Answer · 2015-07-21 21:29:19Z

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.

answered Jul 21, 2015 at 21:29

vinayakj

5,7013 gold badges30 silver badges49 bronze badges

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

2 Comments

angel Over a year ago

I already used the document.ready before in another function and this code was below that, I solved by using the Jquery function .html() instead of innerHTML and sliderStatus = $("status2") instead off document.getElementById('status2'); and it worked

vinayakj Over a year ago

Doesnt make sense.. writing the code below .ready doesnt mean it would tun on DOM ready as you said I already used the document.ready before in another function and this code was below that.

user4826496 · Accepted Answer · 2015-07-21 22:10:42Z

1

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!

answered Jul 21, 2015 at 22:10

user4826496

2 Comments

angel Over a year ago

I already used the document.ready before in another function and this code was below that, I solved by using the Jquery function .html() instead of innerHTML and sliderStatus = $("status2") instead off document.getElementById('status2'); and it worked

vinayakj Over a year ago

global_variable='foo' its not the way global variable is declared its one of the way and this one is implicit global.

Collectives™ on Stack Overflow

JavaScript global variable in function and .hover

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related