Question

我正在为以下任务编写脚本：

任务是让参与者尽可能快地交替按下键盘上的 a 和 b 键，持续10分钟。参与者每次成功按 a 键，然后再按 b 键，他们都应获得一个分数。只应为交替按键而获得积分，按 a 键或 b 键而不在两者之间交替不换分。

我要问的问题的一部分是交替键事件的检测。我自己尝试了此操作，并得到了以下代码，但未达到预期的效果，并且出现以下错误：

未捕获的ReferenceError：x未定义

...但是我只是不明白我在做什么错。

如何修复我的代码并获得所需的结果？

var points = 0;

document.addEventListener('keydown', function(event) {
    var x = event.code;
});

document.addEventListener('keydown', function(event) {
    if (x == 'KeyA' && event.code == 'KeyB') {
        points = points + 1;
        document.getElementById("points").innerHTML = points;
    }
});

<p>Points: <span id="points">0</span></p>

Answer 1

您只需要一个事件侦听器，并且需要在侦听器功能之外定义 a 按键状态变量（x），以便后续执行该操作时可以引用该变量。监听器功能。

您还需要确保在按 b 键之后重置 a 键变量。

通常最好还是缓存对元素的引用，而不是每次运行侦听器功能时都从DOM中选择元素，并且使用textContent而不是innerHTML绕过HTML解析器

const target = document.getElementById('points');
var points = 0, x;

document.addEventListener('keydown', function(event) {
    if(event.key === 'a') x = true; // If this is an `a` key event, set x to true
    if(event.key === 'b') {
        // if this is a `b` key event and a was not pressed, return early
        if(!x) return; 
        // otherwise increment the points variable and assign the result to 
        // the textContent property of the target element
        target.textContent = ++points; 
        // remember to set x to false again
        x = false;
    }
});

<p>Points: <span id="points">0</span></p>

检测交替的按键事件

1 个答案: