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

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"
    }
})

CodePudding user response：

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

CodePudding user response：

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"