如何通过JavaScript实现按键触发随机元素透明度设为1？

你的问题出在随机数和元素ID不匹配——你生成1-9的随机数，但只有第一个元素ID是1，剩下的ID是b到i，自然找不到对应元素。以下是两种可行的修正方案：

方案一：通过类名批量获取元素推荐 #

直接选中所有.box元素，随机挑选一个设置透明度：

function animate() {
  // 获取所有带box类的元素
  const boxes = document.querySelectorAll('.box');
  // 生成0到元素总数-1的随机索引
  const randomIndex = Math.floor(Math.random() * boxes.length);
  // 给选中的元素设置opacity为1
  boxes[randomIndex].style.opacity = '1';
}

// 简化事件绑定写法
document.addEventListener("keydown", animate);

方案二：通过ID数组匹配 #

如果坚持用ID匹配，可以先把所有元素的ID整理成数组，再随机选取：

function animate() {
  // 列出所有box元素的ID
  const boxIds = ['1', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'];
  // 随机选一个ID
  const randomId = boxIds[Math.floor(Math.random() * boxIds.length)];
  // 获取对应元素并设置透明度
  const targetBox = document.getElementById(randomId);
  if (targetBox) {
    targetBox.style.opacity = '1';
  }
}

document.addEventListener("keydown", animate);

扩展：每次只显示一个元素 #

如果希望每次按键后只有选中的元素显示（其他变回透明），可以添加一步重置所有元素的透明度：

function animate() {
  const boxes = document.querySelectorAll('.box');
  // 先把所有box设为透明
  boxes.forEach(box => box.style.opacity = '0');
  // 再随机选一个设为显示
  const randomIndex = Math.floor(Math.random() * boxes.length);
  boxes[randomIndex].style.opacity = '1';
}

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