Javascript 使用keydown进行变量更改

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

它肯定会改变变量，只是没有更新HTML

将

innerHTML

行放在事件处理程序中，这样当有人按下按钮时，它就会更新，而不仅仅是在pageload上

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

不一致，并且根据

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

---

它肯定会改变变量，而不是更新HTML

将

innerHTML

行放在事件处理程序中，这样当有人按下按钮时，它就会更新，而不仅仅是在pageload上

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

不一致，并且根据

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

---

这是因为您在函数之外更改了它

JS:

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

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:

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

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;

---

这是因为您在函数之外更改了它

JS:

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

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:

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

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;

使用x-1而不是x——并将innerHTML放在if条件中

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

这是一个有用的工具：

使用x-1而不是x——并将innerHTML放在if条件中

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

这是工作小提琴：