why is this not accepted as a solution?
document.addEventListener(‘keydown’,up)
document.addEventListener(‘keyup’,down)
and again, why is always “on” added?
why is this not accepted as a solution?
document.addEventListener(‘keydown’,up)
document.addEventListener(‘keyup’,down)
and again, 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.
Also, you should write
document.onkeydown = up;
document.onkeyup = down;
I have three questions about this chapter.
Why function works before we press the keyboard if we put parentheses at the function after onkeyboard?
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.
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 ?
//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.
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.
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’.
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.
Thank you, Mr. mtf! This just answered my question!
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;
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;