随机游戏生成器：游戏封面无法随对应标题同步显示的问题求助

看起来你遇到的问题主要是封面显示的逻辑没有被正确触发，而且判断条件也有错误，咱们一步步来解决：

先说说你代码里的几个核心问题： #

• cover()函数从未被调用：你写了封面显示的函数，但在点击按钮执行的generateGames()里完全没触发它，所以这个逻辑根本没机会运行；
• 判断条件错误：if (games == games[0])是拿整个游戏数组和第一个游戏元素比较，这永远不会成立，自然不会显示封面；
• 没有处理封面的隐藏逻辑：如果不先隐藏之前显示的封面，多次点击后可能会出现多个封面叠加的情况；
• CSS代码冗余：每个封面都写单独的ID样式，其实可以用类来统一管理，维护起来更方便。

下面是修改后的完整解决方案： #

第一步：优化CSS，用类统一管理封面样式

把原来所有#game0到#game9的重复样式替换成一个类，减少冗余代码：

.game-cover {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

第二步：给HTML里的所有封面图片加上这个类

修改每个<img>标签，添加class="game-cover"：

<img src="images/helldivers2-cover.avif" id="game0" class="game-cover" />
<img src="images/skyrim-cover.jpg" id="game1" class="game-cover" />
<img src="images/cyberpunk2077-cover.png" id="game2" class="game-cover" />
<!-- 剩下的img标签都同理添加class -->

第三步：修改JavaScript，实现封面和标题同步显示

调整generateGames()函数，在生成随机游戏后触发封面显示逻辑，同时处理封面的隐藏：

const games = [
  'Helldivers 2',
  'The Elder Scrolls V: Skyrim Special Edition',
  'Cyberpunk 2077',
  'The Witcher 3: Wild Hunt',
  'Grand Theft Auto V',
  'Starfield',
  'Dead By Daylight',
  'Ark: Survival Evolved',
  'Assassins Creed Valhalla',
  'Red Dead Redemption 2',
];

const usedGames = new Set();
const gameElement = document.getElementById('game');
// 一次性获取所有封面元素
const gameCovers = document.querySelectorAll('.game-cover');

function generateGames() {
  if (usedGames.size >= games.length) {
    usedGames.clear();
  }

  while (true) {
    const randomGameIndex = Math.floor(Math.random() * games.length);
    if (usedGames.has(randomGameIndex)) continue;

    const game = games[randomGameIndex];
    gameElement.innerHTML = game;
    usedGames.add(randomGameIndex);
    // 调用封面显示函数，传入当前选中的游戏索引
    showGameCover(randomGameIndex);
    break;
  }
}

// 统一处理封面显示/隐藏的函数
function showGameCover(index) {
  // 先隐藏所有封面
  gameCovers.forEach(cover => {
    cover.style.display = 'none';
  });
  // 显示对应索引的封面
  const targetCover = document.getElementById(`game${index}`);
  if (targetCover) {
    targetCover.style.display = 'block'; // 这里用block或者你需要的显示值都可以
  }
}

为什么这样修改能解决问题？ #

• 现在每次生成游戏标题时，都会同步调用showGameCover()函数，传入当前游戏的索引，确保封面和标题联动；
• 先隐藏所有封面，再显示对应索引的封面，避免了多个封面同时显示的问题；
• 用类统一管理CSS，代码更简洁，后续加新游戏也不用重复写样式；
• 直接通过索引匹配封面ID，逻辑清晰，不会出现判断错误的情况。

这样修改后，点击Generate按钮时，随机生成的游戏标题就会和对应的封面同步显示啦！

备注：内容来源于stack exchange，提问作者shane strange