CODEWITHSUNDEEP
javascriptmouseevent
Mo Ramzan
Mo Ramzan

Reputation: 23

How can I access a variable from inside an anonymous mouse-event function?

I'm trying to access the variable myvar from outside like so:

$(document).mousemove(function(e){
    var myvar = winHeight() + scrollY() - e.pageY;
}); 
console.log(myvar);

But Chrome's javascript console keeps saying "Uncaught ReferenceError: myvar is not defined all-products:203 (anonymous function)"

What am I doing wrong? How do I access this variable outside this function?

EDIT: I've realised that what I was attempting to do isn't realisable. I have since changed my strategy completely and the code works fine now. (Thank you James and especially Vlad for your help!)

Upvotes: 2

Views: 764

Answers (2)

Vlad Balmos
Vlad Balmos

Reputation: 3412

I think this is a job for javascript events. Basically you have a global variable which will be updated on mouse move. After you update the variable you have to let other components know that the variable is ready for processing.

The code:

var myVar; // the global variable

// the function that will be caled when myVar has been changed
var myVarChangedHandler = function() {
    console.log('myVar variable has been changed: ' + myVar);
}

// bind the event to the above event handler
$('body').bind('MyVarChangedEvent', myVarChangedHandler);

// instal mouse move event handler on document
$(document).mousemove(function(e){
    myVar = winHeight() + scrollY() - e.pageY;
    $('body').trigger('MyVarChangedEvent');
});

UPDATE

Removed the var keyword form the movemove event handler.

The code that depends on myVar should be put in the myVarChangedHandler function.

I'll try to explain the best i can your code, the flaw in it and how you should be solving the problem using an analogy. Let's take the following code (global variable corrected)

var myvar;
$(document).mousemove(function(e){
    myvar = winHeight() + scrollY() - e.pageY;
}); 
console.log(myvar);

Let's say you, the programmer, are a team leader in a web development department in some unnamed company and you have a list of tasks to be done in a day of work ( the tasks in our analogy is to update myvar everytime the mouse moves) You have at your disposal a repository (var myvar) and 2 developers:

  • developer John (function(e) { myVar = ... };)
  • developer Ken (console.log(myvar))

09:00 You come to the office in the morning (user opens the page)

09:05 You power up the server / repository

var myvar;

09:10 You tell John: John, please do this tasks and everytime you complete each task uploaded it to the repository, and go home after your hours are finished

$(document).mousemove(function(e){
    myvar = winHeight() + scrollY() - e.pageY;
});

09:11 You tell Ken: Ken, please test the code in the repository right now and go home after you have finished testing

console.log(myvar);

(at this time, Ken sees that the repository is empty and goes home - that's because John didn't had time to solve even on task in a minute so Ken has nothing to test)

09:12 You go home

At 09:12 there's only John at the office doing the tasks, You and Ken have left home because you don't have anything else to do. This also happens to your code. You output the value of myvar but you haven't even moved the mouse so, of course, the value is undefined

To solve this we add some modifications:

09:00 You come to the office in the morning

09:05 You power up the server (repository)

09:10 You tell John: 

John, please do this tasks and everytime you complete each task
uploaded it to the repository and tell Ken to test the code.
Go home after you have finished

09:11 You tell Ken:

Ken, each time John tells you that he has completed a task,
fetch the code from the repository and test it.
Go home after he has finished

09:12 You go home

at 09:12 both John and Ken are at the office doing their job.

In the above case ken is myVarChangedHandler = function() {...};

When John tells Ken that he completed the task an actual event occurs (the telling), when Ken acknowleges John signal he starts testing (Ken is the event handler)

This is how event driven architecture in javascript works. I would advise you to ditch jquery, mootools, etc... and start learning the core concepts and the basics. Reinvent the wheel a few times then go back to jquery. I hope i explained enough for you to understand.

Upvotes: 2

James Montagne
James Montagne

Reputation: 78650

You will need to move the variable to an outer scope which is accessible by both bits of code.

var myvar = -1;

$(document).mousemove(function(e){
    myvar = winHeight() + scrollY() - e.pageY;
}); 

console.log(myvar);

Upvotes: 2

Related Questions