Estoy tratando de usar eventos de teclado, pero solo puedo hacerlo usando el primer evento, en este caso, key-down, pero cuando intento key-up no sucede nada.
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" } })Necesitas posición absoluta y necesitas usar
(boxTop + 10)+"px" (boxTop - 10)+"px"Cambiar más y menos a
+= y -= si quieres seguir moviéndote
¿Quizás probar que estás en la cima?
¿Por qué no usar keyDown en ambos controladores de eventos?
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; }El evento sucedió. No hay cambio debido a esto.
box.style.top = boxTop - "10px" box.style.top = boxTop + "10px"Por favor cámbialo.
box.style.top = boxTop - 10 + "px" box.style.top = boxTop + 10 + "px"