How to consider an second event when only the first one happens?

Question

I am trying to use keyboard events, but I just can do it using the first event, in this case, key-down, but when I try key-up nothing happens.

const box = document.createElement("div")
box.setAttribute("id", "box")
document.querySelector("body").appendChild(box)

let boxTop = 20;
let boxLeft = 20;

document.addEventListener("keydown", (e) => {
    let keyName = e.key
    if(keyName === "ArrowDown") {
        box.style.top = boxTop + "10px"
    }
})

document.addEventListener("keyup", (e) => {
    let keyName = e.key
    if(keyName === "ArrowUp") {
        box.style.top = boxTop - "10px"
    }
})

Your title is not even mentioned. Can you add more details of what you want and what is happening — Tushar Shahi, Sep 29 '21 at 12:43

mplungjan · Answer 1 · 2021-09-29T13:00:26.797

You need position absolute and you need to use

(boxTop + 10)+"px"
(boxTop - 10)+"px"

Change plus and minus to

+= and -= if you want to continue to move

Perhaps test you are at top?

Why not use keyDown on both event handlers?

const box = document.createElement("div")
box.setAttribute("id", "box")
document.querySelector("body").appendChild(box)

let boxTop = 20;
let boxLeft = 20;

document.addEventListener("keydown", (e) => {
  let keyName = e.key
  if (keyName === "ArrowDown") {
    box.style.top = (boxTop += 10)+"px"
  }
})

document.addEventListener("keyup", (e) => {
  let keyName = e.key
  if (keyName === "ArrowUp") {
    let  top = (boxTop -= 10);
    if (top<0) top = 0; // unleess you want them to move out of viewport
    box.style.top = top+"px"
  }
})

div { border: 1px solid black; height: 100px; width:100px;  position: absolute;  }

Maybe also add a check in the `keyup` listener to check that `boxTop > 0`. — Andy, Sep 29 '21 at 12:58

score 2 · Answer 2 · answered Sep 29 '21 at 12:49

2

The event happened. There is no change because of this.

box.style.top = boxTop - "10px"
box.style.top = boxTop + "10px"

Please change it.

box.style.top = boxTop - 10 + "px"
box.style.top = boxTop + 10 + "px"

answered Sep 29 '21 at 12:49

Kirill Savik

1,228
4
7

I am surprised the second one does not give 2010px – mplungjan Sep 29 '21 at 12:55
@mplungjan: `+` and `-` are left-to-right associative (`(boxTop - 10) + "px"`). – Felix Kling Sep 29 '21 at 13:00
I would never trust that :) I know `-` works but plus!? – mplungjan Sep 29 '21 at 13:01

How to consider an second event when only the first one happens?

2 Answers2