FAQ: DOM Events with JavaScript - Keyboard Events

[wiki-bot]

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
Build Interactive Building Interactive JavaScript Websites

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 () 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 () below!

Agree with a comment or answer? 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!

[jason_eliasen]

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);

[bripod]

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)

[mtf]

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 ...

[bripod]

Thanks for the reply.

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

[mtf]

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

[aliceiw]

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).

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;

[mtf]

@aliceiw

function() => {

Arrow syntax does not use the function keyword.

up = () => {

}

[cloudsurfer00443]

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”

[zsuzsa_lukacs]

why is this not accepted as a solution?

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

and again, why is always “on” added?

[mtf]

@py7888132363

why is always “on” added?

node.onkeydown
node.onkeyup

are known as, GlobalEventHandlers to which we supply a callback function that will be carried out when triggered.

Your code is not incorrect, as such, just not what the SCT author has deemed suitable for the exercise.

[tag4661158259]

Also, you should write

document.onkeydown = up;
document.onkeyup = down;

[asiadecoder]

I have three questions about this chapter.

1. Why function works before we press the keyboard if we put parentheses at the function after onkeyboard?

2. How can I make the function makes ball get higher and higher by pressing the button?
   I tried to achieve it by using += 1, but what we put in the up function is string, so found it doesn’t work.

3. Why does it work for only one time? It doesn’t work from second time I press the keyboard.

I’m pretty sure there’s someone who also has same question with me.

[dev0403120509]

Why we put document instead of ball ?

[3998046173]

//doesn't work.
let ball = document.getElementById('float-circle');
// Write your code below
const up =function(event){
event.target.style.bottom = '250px';
}

const down = function(event){
event.target.style.bottom = '50px';
}

ball.addEventListener('keydown',up);
ball.addEventListener('keyup',down);

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

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

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

document.onkeydown = up;
document.onkeyup = down;

I don’t know why the first code doesn’t work.

[yogeshwaranra]

Why we have use document here

document.onkeydown = up
document.onkeyup = down

[mtf]

Keyboard events can only be detected on the document object. There is no way to associate the events with any particular page element.

[2kali]

hello

why this works only one time? when i press again on a key nothing is happened.

document.onkeydown = up;
document.onkeyup = down;

[mtf]

Do you have two callback functions above those listeners?

const up = function () {
    // element.style.top -= 10
}
const down = function () {
    // element.style.top += 10
}