键码在 javascript 中不起作用

Question

this does not move the box when pressing the right and left arrow. please post in the comments if you can help.

window.addEventListener("keydown", testkey , false );
var el = document.getElementById("player");
//changes the x position by a value
function changex(num) {
    el.style.left = ((num + el.style.left) + "px");
}
//changes the y position by a value
function changey(num2) {
    el.style.top = ((num2 + el.style.top) + "px");
}
//sets x and y position of box
function setpos(x, y) {
    el.style.left = (x + "px");
    el.style.top = (y + "px");
}
//this returns the key that is pressed
function testkey(e) {
    if (e.keyCode == "37") {
        //left key
        changex(-10);
    }
    else if (e.keyCode == "39") {
        //right key
        changex(10);
    }
}
setpos(0,0);

Answer 1

我看到两个问题：

第一个

您正在将数值添加到字符串，这会导致串联。例如：
((num + el.style.left) + "px") 等同于 10 + 0px + px，它会产生类似于 100pxpx 的字符串。这不是有效的 CSS 值。

我建议使用 parseInt 将现有样式值从字符串转换为数字：
el.style.left = parseInt(el.style.left) + num + "px";

如需进一步参考，请参阅 Get a number for a style value WITHOUT the “px;” suffix。

第二

您需要 position the element before you can use left,right,top, or bottom CSS definitions. The MDN 注意 left（例如）仅适用于 "positioned elements"。

下面，我使用了 position:absolute，但任何有效的位置值都可以。

如需进一步参考，请参阅 css “left” not working。

工作示例

window.addEventListener("keydown", testkey, false);
var el = document.getElementById("player");

function changex(num) {
  el.style.left = parseInt(el.style.left) + num + "px";
}

function changey(num) {
  el.style.top = parseInt(el.style.top) + num + "px";
}

function setpos(x, y) {
  el.style.left = (x + "px");
  el.style.top = (y + "px");
}

function testkey(e) {
  switch (e.keyCode) {
    case 37: changex(-10); break;
    case 38: changey(-10); break;
    case 39: changex(10); break;
    case 40: changey(10); break;
    default:
  }

}

setpos(0, 0);

#player {
  position: absolute;
}

<div id="player">test</div>

Answer 2

在您的 changex() 和 changey() 函数中，您试图在数字和字符串之间进行计算。 num 以数字形式出现，但 el.style.left 是字符串“0px”。像这样将 parseInt() 放在 el.style.left 周围并且有效：

el.style.left = ((num + parseInt(el.style.left)) + "px");

还要确保您的 player 元素已通过 CSS 应用 position:absolute。

键码在 javascript 中不起作用

keycodes not working in javascript

javascript

keyboard-events

第一个

第二

工作示例