基于事件监听与DOM操作实现Q键文本切换的需求问询

你当前的代码只能单向将文本改为"Q"，核心原因是没有判断元素当前的文本状态，每次触发都直接赋值，自然无法实现切换效果。要达成按下Q键在"A"和"Q"之间来回切换的需求，只需在触发事件时判断当前文本内容，再做对应修改即可，同时推荐使用更标准的event.key替代已废弃的keyCode。

修正后的完整代码 #

HTML部分

<p id="A">A</p>

JavaScript部分

document.body.addEventListener("keydown", function(event) {
  // 同时匹配小写q和大写Q按键
  if (event.key === 'q' || event.key === 'Q') {
    const targetEl = document.getElementById('A');
    // 根据当前文本状态实现双向切换
    targetEl.innerText = targetEl.innerText === 'A' ? 'Q' : 'A';
  }
});

关键修改说明 #

• 先获取目标元素并缓存，避免重复查询DOM，提升性能
• 用event.key判断按键，比keyCode更直观易读，符合现代JS标准
• 通过三元运算符判断当前文本，实现"A"与"Q"的双向切换逻辑

内容的提问来源于stack exchange，提问作者Neselo