Cannot read property 'keyCode' of undefined when getting the key numbers for a game of pong

Question

I am creating a game of pong and am implementing the paddles' move function. But when I try to get the keyCode to see whether they are trying to move up or down, I get this error.

I have tried to console.log just about everything to help find out what the problem is and have looked up how to do it online and nothing has helped.

//javascript to get keyCode for wasd paddle
function getWasdKey(e){
 var key = e.keyCode;
  if(key == 87){
    return true;
  }
  if(key == 83){
    return false;
  }
}
//javascript to get keyCode for arrow paddle
function getArrowKey(e){
  var key = e.keyCode;
  if(key == 38){
    return true;
  }
  if(key == 40){
    return false;
  }
}
//where I use the get key functions
function paddleArrowMove(){
  var paddlearrowtop = getStyle('paddlearrow', 'top');
    if(getArrowKey == true){//up
    setStyle('paddlearrow', 'top', paddlearrowtop - 5);
  }
  if(getArrowKey == false){//down
    setStyle('paddlearrow', 'top', paddlearrowtop + 5);
  }
}
function paddleWasdMove(){
  var paddlewasdtop = getStyle('paddlewasd', 'top');
  if(getWasdKey == true){//up
    setStyle('paddlewasdtop', 'top', paddlewasdtop - 5);
  }
  if(getWasdKey == false){//down
    setStyle('paddlewasdtop', 'top', paddlewasdtop + 5);
  }
}

//html to run the javascript
<body onload="startIntervals();" onkeypress="getArrowKey(); getWasdKey();">

I expected the paddles to move up and down but instead got a "cannot read property 'keyCode' of undefined" error.

No need for intervals when adding eventlisteners. Just remove that. Also your keydown listeners return boolean values which you assign to undeclared variables, but you're not showing what these are used for. Bothe your vent handler functions can only work when the keyboard event which causes their execution is passed. setInterval doesn't pass anything. — connexo, May 19 '19 at 21:55

score 3 · Answer 1 · answered May 19 '19 at 21:59

Your functions getArrowKey and getWasdKey take a parameter e, which you clearly intend to be the event object for the corresponding event. Yet you call them with no parameters:

onkeypress="getArrowKey(); getWasdKey();"

When you call a function in Javascript and fail to pass all its formal parameters, it is assumed that any you don't supply are undefined. That's what is happening to e here, and causing your error.

Since using on* attributes is generally a bad idea anyway, I would recommend to solve this by adding the event listeners using Javascript. As well as other benefits such as separation of concerns between content and logic, the function you pass to addEventListener automatically gets supplied with the event object as its parameter when called.

So remove this:

onkeypress="getArrowKey(); getWasdKey();"

from the body element, and add this in your Javascript instead:

document.body.addEventListener("keypress", function(e) {
    getArrowKey(e);
    getWasdKey(e);
});

Also, as @connexo correctly noted, your startIntervals function is completely unnecessary and will probably cause bugs - so I would simply remove that as well.

it just gave me a, "Uncaught TypeError: Cannot read property 'addEventListener' of null" error — Nicholas Korte, May 19 '19 at 22:07
oops, apologies for not testing this - you can only use `document.body` when the body is actually loaded. It's pretty easy to fix though, see [this question](https://stackoverflow.com/questions/9916747/why-is-document-body-null-in-my-javascript) — Robin Zigmond, May 19 '19 at 22:15

Cannot read property 'keyCode' of undefined when getting the key numbers for a game of pong

1 Answers1