FAQ: DOM Events with JavaScript - Keyboard Events

This community-built FAQ covers the “Keyboard Events” exercise from the lesson “DOM Events with JavaScript”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise Keyboard Events

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

I think they should let this also pass, fewer lines of code and much easier to look at than the passing answer:

let up = () => ball.style.bottom = ‘250px’;
let down = () => ball.style.bottom = ‘50px’;

document.addEventListener(‘keydown’, up);
document.addEventListener(‘keyup’, down);

onkeydown for certain keys?

the last task on this lesson says…

Run your code and play around with the keyboard events to make the ball bounce on the platform. You can try keys like the space bar, letter keys or number keys!

can anyone help with the terminology for assigning this to a certain key, like W (as in w,a,s,d) …or the Space bar / Up Arrow / whathaveyou

have googled, but getting lots of conflicting keypress advice (now deprecated apparently!), and also advice about keycodes

(An example in the hint would have been handy, as the instruction does tell you try this)

If you want to avoid repetition when a key is held down, use onkeyup instead.

In your handler, with e as the event object,

return e.code.charAt(3)

That will give you the uppercase letter. Note that e.code returns KeyA KeyS, etc. hence the 4th character.

case 'A':
case 'S':

etc.

For actual key character,

return e.key    // a s d ArrowUp ArrowDown ...

charCode is deprecated but we can use String.charCodeAt to the get the code.

e.key.charCodeAt(0)    // A 65 a 97 ...

Thanks for the reply.

Can’t get my head around it at the minute… but will have a play around with it later!

When you have some code we can take a look at it. Good luck!

What am I doing wrong here?
(Long time since I did the rest of the exercises in this lesson but I can’t seem to jog my memory by going back over it). :face_with_monocle:

let ball = document.getElementById('float-circle');

// Write your code below

let up = function() => {
  ball.style.bottom = '250px';
};

let down = function() => {
  ball.style.bottom = '50px';
};

ball.keydown = up;
ball.keyup = down;

Arrow syntax does not use the function keyword.

up = () => {

}
2 Likes

you need to make ball.onkeydown and ball.onkeyup
they don’t explain well, but you gotta add ‘on’ to the event object properties…
but inside he addEventListener(‘keyup’ ) without the “on”

1 Like