Scoping issue Javascript

Question

var isPressed =0;
document.body.onkeypress = function(evt)
{
  evt = evt || window.event;

    if (evt.keyCode!=='undefined') {
        // Do your stuff here
        isPressed = 1;
        console.log(isPressed);//Here it gives 1
    }
//return isPressed;
}
result = navigator.appVersion +"|"+n+"|"+getStyle(mydiv,'opacity')+"|"+history.length+"|"+metarefesh+"|"+hasFocus+"|"+navigator.platform+"|"+parent.top.document.referrer+"|"+activexenable+"|"+javaEnabled+"|"+hasFlash+"|"+navigator.plugins.length+"|"+ hasMouseMoved+"|"+isClicked +"|"+**isPressed**+"|"+isresized+"|"+isScrolled+"|"+getStyle(mydiv,'zIndex');

console.log(result); console.log(isPressed)//This gives out zero even though I have pressed a key and it has changed to 1.

If I do a console.log(isPressed) inside the if loop in question it works.Its a scoping issue I am not aware of.Please help.

Thanks in advance

This has nothing to do with scoping. Just that `console.log(isPressed)` outside the event handler executes before your keypress and this code doesn't make sense to me.. Plus `if` is not a loop, it is an conditional expression. If you want to do something after the key is pressed do it in the event handler or invoke that action from the event handler. — PSL, Oct 15 '13 at 14:58

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

The problem is one of synchronization. Your code is read as:

when a key is pressed, set isPressed to one

show the value of isPressed

The the first instruction just says what will happen at a later point in time and it is completed. The second instruction follows immediately, before any keys are pressed, so it shows 0. If you were to do a third instruction:

window.setTimeout(function(){console.log(isPressed)}, 3000);

and press a key right after the page load (before 3 seconds pass), you will see a log with isPressed set to 1.

If you have additional logic that needs to be executed after a key is pressed, you need to place it at the comment "Do your stuff here".

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 15 '13 at 15:06

Tibos

27,507
4
50
64

Thanks.So my objective is to see whether any key was pressed on the window and set that isPressed event to 1. when any key is pressed.So my final output is something like this.So the result variable should be able to access the value of isPressed; – Swaraj Chhatre Oct 15 '13 at 15:14
1

"see whether any key was pressed" -> When do you need to know? – Tibos Oct 15 '13 at 15:16
I have added the result variable in my code where I need to access the isPressed variable.Kindly help. – Swaraj Chhatre Oct 15 '13 at 15:29

score 1 · Answer 2 · answered Oct 15 '13 at 15:11

Here's the core answer to why those console.logs are outputting what they are:

Javascript has this concept of events that are handled asynchronously. You leverage this when you use the onkeypress event.

The rest of the JS file does what it needs to do (including setting the event), then when the event is fired (by you pressing a key) it runs the code inside.

In practice the JS File is doing this:

Set a variable isPressed to 0.
Set this anonymous function to happen onkeypress.
Log isPressed to the console.
Whenever onkeypress actually happens, let's run that anonymous function that we set in step 2.

When you reach step 3, you haven't actually done anything to the isPressed variable, so it's logging it as 0.

Later, when you fire onkeypressed you're actually changing the value of isPressed, so it's logging as 1.

You should also be mindful that the anonymous function bound to onkeypress isn't specifically returning isPressed. You would need to add return isPressed to the bottom (where that comment is).

Since this is an anonymous function bound to an event, there isn't really a good reason to do that. The value won't go anywhere, and the scoping you have set up is ideal if you want to manipulate the isPressed variable.

@EvanSiegel.Have alook at my code change.The result variable is where I am trying to access it but still the value is 0.Thanks — Swaraj Chhatre, Oct 15 '13 at 15:47
@SwarajChhatre, you're still setting the `result` variable before the event is fired. If you put that inside of your event function, it will be set correctly. You should note that the javascript is no running in the order you write it in the file. Take another look at the order that things are happening. — vanev_, Oct 16 '13 at 16:31

Scoping issue Javascript

2 Answers2