Question

var x = 50;
var y = 50;
document.addEventListener("keydown", checkKey, false);
function checkKey(e) {
  if (e.keyCode == "37") {
   x = x--;
  }
}
document.getElementById("test").innerHTML = x;

当我这样做时，按向左箭头不会改变x。因此，“test”的innerHTML不会改变，它会保持在50.为什么？

Answer 1

它肯定会更改变量，您只是不更新HTML。

将innerHTML行放在事件处理程序中，以便在有人按下按钮时更新，而不仅仅是在页面加载

var x = 50;
var y = 50;
document.addEventListener("keydown", checkKey, false);
function checkKey(e) {
  if (e.keyCode == "37") {
   x = x--;
   document.getElementById("test").innerHTML = x;
  }
}

请注意KeyboardEvent.keyCode不一致，并且根据MDN

此功能已从Web标准中删除。一些浏览器可能仍然支持它，它正在被删除。

Answer 2

这是因为你在功能之外改变它。

<强> JS：

var x = 50;
var y = 50;
document.addEventListener("keydown", checkKey, false);

function checkKey(e) {
  if (e.keyCode == "37") {
    x--;
    document.getElementById("test").innerHTML = x;
  }
}
document.getElementById("test").innerHTML = x;

<强> HTML：

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

http://codepen.io/DaCurse0/pen/VKQYJb

Answer 3

使用x - 1代替x--并将innerHTML放在if条件

中

var x = 50;
var y = 50;
document.addEventListener("keydown", checkKey, false);
function checkKey(e) {
  if (e.keyCode == "37") {
    x = x - 1;
    document.getElementById("test").innerHTML = x;
  }
}

这是工作小提琴：pointfree.io

使用keydown进行可变更改

3 个答案: