FAQ: DOM Events with JavaScript - Keyboard Events

why is this not accepted as a solution?

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

and again, why is always “on” added?

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

1 Like

Also, you should write

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

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.

Why we put document instead of ball ?

8 Likes

A post was split to a new topic: Examine DOM elements for event handler functions

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

1 Like

Why we have use document here

document.onkeydown = up
document.onkeyup = down

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

5 Likes

hello

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

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

Do you have two callback functions above those listeners?

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

yes, i have.

First I wrote it like this

const down = function () {
    // element.style.bottom = '50px';
} //executed once

After that i editing to

const down = function () {
    // element.style.bottom = '';
} //executed multiple times

But i can’t understand why. in the second version i return its value to the default, in the first one i make it a fixed value. what was the thing which made the difference?

thank you for your help.

What is the node assigned for element?

node.style.bottom = '50px';
  ^

node will be the variable assigned that page element by its id, perhaps?

yes, of course.

element = the element with the id ‘float-circle’.

1 Like

I have exactly the same question. Why does the first solution not work?

This question looks to never have had an answer. The first solution does not work because the event target is document, not the ball page element.

1 Like

Thank you, Mr. mtf! This just answered my question! :slightly_smiling_face:

1 Like

The lesson mentions the .key property but doesn’t show how it can be used. Looking over the MDN documentation, I modified the lesson a bit so that it uses the .key property to only trigger the up function when space is pressed:

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

// Write your code below

const up = (event) => {
let theKey = event.key;

if (theKey === ’ ') {
ball.style.bottom = “250px”;
}
};

const down = () => {
ball.style.bottom = “50px”;
};

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

1 Like

Thank you, so much! I completed the lesson, and passed, but the ball would not dribble. I am so glad you taught the formula. It is disappointing that it is not taught in the lesson. Maybe it is self-explanatory, and I am just slow, but I am a newbie, and needed that guidance.

I passed the lesson with the following code, but the ball wouldn’t bounce. I understand I used the event handler approach rather than the event listener approach shown in the solution, but what prevents the code below from working please?

document.ball.onkeydown = up;

document.ball.onkeyup = down;