-1

I am attempting to watch key presses on a simple web page using the following code:

document.addEventListener("onkeypress", currentKeyPress(event));
function currentKeyPress(event){
    var keynum;
    console.log(event.which);
    if(document.event){
        keynum = event.keyCode;
    } else if(event.which){
        keynum = event.which;
        console.log(event.which);
    }
    document.getElementById("info").innerHTML = keynum;

}

When I do this, I get "ReferenceError: event is not defined" in firefox. What do I ned to do to fix this?

user348136
  • 1
  • 3

3 Answers3

3

Change onkeypress into keypress and call the function with name currentKeyPress no need pass event to function 

document.addEventListener("keypress", currentKeyPress);
function currentKeyPress(event){
    var keynum;
    console.log(event.which);
    if(document.event){
        keynum = event.keyCode;
    } else if(event.which){
        keynum = event.which;
        console.log(event.which);
    }
    //document.getElementById("info").innerHTML = keynum;
    console.log(keynum)
}
<input>
prasanth
  • 22,145
  • 4
  • 29
  • 53
  • `>> No need to mention a event` this seems to be wrong, it results in `ReferenceError: event is not defined` inside a function. Run your own code. You need to define a function as `function currentKeyPress(event){...`. Everything else is true. – Egor Stambakio May 08 '17 at 12:31
  • @wostex No `event` is pass by `add event-listener` .see my code its working good.is not throw any error.`console.log(event)` in function working normal – prasanth May 08 '17 at 12:34
  • it does throw an error in firefox. Fiddle: https://jsfiddle.net/wostex/r2zjx8a7/ this code works fine in firefox, you can focus dom frame and press buttons. If you skip `event` for function declaration - you get an error. In chrome it works fine in either case. – Egor Stambakio May 08 '17 at 12:36
  • @wostex..yes .you are right..I was working with chrome only ,Thanks man .i was edited – prasanth May 08 '17 at 12:39
0

You do not need to pass the event variable:

do it like so:

document.addEventListener("onkeypress", currentKeyPress);
function currentKeyPress(event){
    var keynum;
    console.log(event.which);
    if(document.event){
        keynum = event.keyCode;
    } else if(event.which){
        keynum = event.which;
        console.log(event.which);
    }
    document.getElementById("info").innerHTML = keynum;
}

The event is automatically passed on the currentKeyPress function.

See the example below:

document.getElementById('paraxxx').addEventListener("click", doThis);
function doThis(event){
    console.log(event)
}
<p id="paraxxx">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

Here when you click on the paragraph you will invoke the doThis function and the event will be passed on to it.

Shakti Phartiyal
  • 6,156
  • 3
  • 25
  • 46
  • The code works now but I noticed two things...first, when I try to put it in an external .js file it no longer works. Second, it doesn't seem to like arrow keys, shift, etc. Is there a way to grab those as well? – user348136 May 08 '17 at 15:32
  • @user348136 please refer http://stackoverflow.com/questions/5597060/detecting-arrow-key-presses-in-javascript to capture arrow key events.. – Shakti Phartiyal May 08 '17 at 15:33
  • @user348136 in case of external js file take care that the js file is loaded onto the page check the browser console for any errors – Shakti Phartiyal May 08 '17 at 15:34
  • Will do. But what about the issue with loading it in an external JS? I added a console.log command and it looks like it's there, but the eventlistener isn't working. – user348136 May 08 '17 at 15:42
  • @user348136 it's possible that the event listener is attached before the element is created on the document .. make an alert in the external js file and check if it occurs. Also check the browser console for any errors as I stated above.. if problem persists send me a screenshot of the js file contents and also the dom element position and the section where the js file is included. – Shakti Phartiyal May 08 '17 at 15:45
  • How do I make an alert in the external file? i already have it alerting in the log but I don't know how to force it to attach after the element is created. Couldn't I just put it at the bottom of the HTML? – user348136 May 08 '17 at 15:52
  • @user348136 simply write alert(); in the external js file . If an alert appears that means the js file loaded successfully – Shakti Phartiyal May 08 '17 at 15:57
  • Ok then it worked. I added it but it doesn't seem to have the eventlistener working – user348136 May 08 '17 at 16:09
  • @user348136 can you send screenshots of the attached js file and the script where you are attaching the file – Shakti Phartiyal May 08 '17 at 16:20
  • I can't send screenshots but I can embed the HTML. The Javascript is as above save the minor change:

    TEST

    Info goes here

     – user348136 May 08 '17 at 16:40
  • @user348136 any errors in the browser console > – Shakti Phartiyal May 08 '17 at 16:41
  • No errors. I even tried adding a separate call in the html with which works but still no output from the function listening for key presses: function initLoads(){ console.log("initLoads called"); document.addEventListener("onkeypress", currentKeyPress); } function currentKeyPress(event){ alert("currentKeyPress called"); var keynum; if(document.event){ keynum = event.keyCode; console.log(event.keyCode); } else if(event.which){ keynum = event.which; console.log(event.which); } } – user348136 May 08 '17 at 16:54
  • @user348136 the event is keypress not onkeypress : function initLoads(){ console.log("initLoads called"); document.addEventListener("keypress", currentKeyPress); } function currentKeyPress(event){ alert("currentKeyPress called"); var keynum; if(document.event){ keynum = event.keyCode; console.log(event.keyCode); } else if(event.which){ keynum = event.which; console.log(event.which); } } – Shakti Phartiyal May 08 '17 at 16:56
  • @user348136 this will work – Shakti Phartiyal May 08 '17 at 16:57
  • It did. Thank you so much. – user348136 May 08 '17 at 16:59
  • @user348136 Great do not forget to approve / up vote the answer if it helped you out.. Ping me for any further help – Shakti Phartiyal May 08 '17 at 17:02
0
document.addEventListener("onkeypress", currentKeyPress(event)); //error

The parser expects the second argument of document.addEventListener to be a function, now you're passing the result of the invocation of the function along with the event variable that is not defined in the current scope (hence the exception), you have to pass just the reference to the function. Javascript will call your function back as soon as the event triggers providing the event as an argument

change it to:

document.addEventListener("keypress", currentKeyPress));
Karim
  • 8,454
  • 3
  • 25
  • 33