使用keydown进行变量更改

Making a variable change with keydown

本文关键字：变量 keydown 使用      更新时间：2023-09-26
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。为什么?

它肯定改变了变量，只是没有更新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标准中删除。尽管一些浏览器可能仍然支持它，但它正在被删除。

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

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

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

这里是工作小提琴:https://jsfiddle.net/2oz87hvr/

相关文章：