如何在按下特定按键时更新P元素内容？实现Q键文本切换功能

首先修正代码里的拼写错误：addEventListerner 应为 addEventListener，以下是实现需求的完整代码：

// 获取页面中第一个<p>元素
const firstPara = document.querySelector('p');

window.addEventListener('keypress', e => {
  // 判断是否按下Q/q键（兼容大小写输入）
  if (e.key.toLowerCase() === 'q') {
    // 切换文本内容：A和Q互转
    firstPara.textContent = firstPara.textContent === 'A' ? 'Q' : 'A';
  }
});

<p>A</p>
<p>B</p>
<form id="form">
  <input type="text" placeholder="text" />
  <input type="password" placeholder="more text" />
</form>

关键逻辑说明 #

• 用 document.querySelector('p') 精准定位第一个<p>标签，确保操作目标正确。
• 通过 e.key.toLowerCase() === 'q' 判断按键，同时支持大小写Q触发（比如按住Shift+Q也能生效）。
• 三元表达式简化切换逻辑：对比当前文本内容，实现A和Q的双向切换。

可选优化（避免输入框干扰） #

如果希望在表单输入框聚焦时不触发该切换逻辑，可添加过滤判断：

const firstPara = document.querySelector('p');

window.addEventListener('keypress', e => {
  // 若当前焦点在输入框，直接跳过
  if (e.target.tagName === 'INPUT') return;
  if (e.key.toLowerCase() === 'q') {
    firstPara.textContent = firstPara.textContent === 'A' ? 'Q' : 'A';
  }
});

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