CODEWITHSUNDEEP
jquery
muudless
muudless

Reputation: 7532

Why isn't the boolean variable being detected?

the console is not detecting overExpand as true at the end. Am I doing something wrong?

var transLayer = $('.transparentBg');
var overExpand = false;
var overUl = false;


$(transLayer).hide();
console.log('transLayer hide'); // this is being logged

$('#header .nav .wrapper > ul > li.expand').hover(function(){ 
    overExpand = true;  
    console.log(overExpand);// this works = true    
}, function(){ 
    overUl = true;
});

console.log(overExpand); // this shows false

Upvotes: 1

Views: 55

Answers (2)

ahren
ahren

Reputation: 16961

Add your console.log() inside the hover function.

$('#header .nav .wrapper > ul > li.expand').hover(function(){ 
    overExpand = true;    
    console.log(overExpand);   
}, function(){ 
    overUl = true;
});

This will create a new log in your console each time you hover over the element, as this is when the function is executed. In your previous code, the call to console.log() happens before the hover function is triggered.

Upvotes: 1

Justin Niessner
Justin Niessner

Reputation: 245429

The value is false because the code that sets the value to true is never run.

You have overExpand = true inside of a hover event handler. That code won't be run until the event is fired. The console.log(overExpand) will surely execute before the event is fired therefore overExpand will still be false.

If you want to see the value after it is set to true, you should log from inside the handler:

$('header .nav .wrapper > ul > li.expand').hover(function(){
    overExpand = true;
    console.log(overExpand);
}, function(){
    overUl = true;
});

If you're really expecting it to be true the way it is currently written, you'll have to restructure the code a good deal.

Upvotes: 3

Related Questions