我正在尝试制作一个应用程序，它将生成一个随机视频游戏并在生成时显示游戏封面

问题描述 投票：0回答：1

当使用我的 JavaScript 函数显示游戏标题时，我无法从我的 html 文档中获取要显示的视频游戏封面图像。我不知道该怎么做，并且在谷歌搜索帮助时找不到与我的问题足够相似的东西。

这是我的 HTML：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Game Generator</title>
  </head>
  <body>
    <header id="header">
      <div id="title">Video Game Generator</div>
    </header>
    <section>
      <div id="container">
        <img src="images/helldivers2-cover.avif" id="game0" />
        <img src="images/skyrim-cover.jpg" id="game1" />
        <img src="images/cyberpunk2077-cover.png" id="game2" />
        <img src="images/witcher3-cover.jpg" id="game3" />
        <img src="images/gtav-cover.png" id="game4" />
        <img src="images/starfield-cover.webp" id="game5" />
        <img src="images/dbd-cover.avif" id="game6" />
        <img src="images/arkse-cover.jpg" id="game7" />
        <img src="images/acv-cover.jpg" id="game8" />
        <img src="images/rdr2-cover.jpg" id="game9" />
        <ul id="game"></ul>
      </div>
      <div id="btn">
        <button onclick="generateGames()">Generate</button>
      </div>
    </section>

    <script src="script.js"></script>
  </body>
</html>

这是我的CSS：

    @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: rgb(37, 37, 37);
}

#header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
}

#title {
  color: white;
  font-size: 50px;
}

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 550px;
}

#game0 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game1 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game2 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game3 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game4 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game5 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game6 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game7 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game8 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game9 {
  display: none;
  padding-top: 50px;
  height: 500px;
  width: 300px;
}

#game {
  color: white;
  font-size: 25px;
  padding: 50px;
}

#btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 250px;
} 

button {
  height: 100px;
  width: 300px;
  font-size: 35px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid black;
  border-radius: 25px;
}

这是我的Javascript：

   //list of games to generate//

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',
];

//list of games are stored in this//

const usedGames = new Set();

//getting the game element//

const gameElement = document.getElementById('game');

//function to make the games generate randomly//

function generateGames() {

  //if the index of the listed games exceeds the length of the set, then clear the set and start again//

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

   //if the set still has a game left, continue to generate//

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

    //set the html element of game to = the value of a random game//

    const game = games[randomGame];
    gameElement.innerHTML = game;
    usedGames.add(randomGame);
    break;
  }
}

//function to set the cover of the game to be visible when = to the title of the game//

function cover() {
  const game0 = document.getElementById('game0');
  if (games == games[0]) {
    game0.style.display = '';
  }
}

目前我只设置了显示数组中的第一个游戏，但生成标题时不会显示封面。关于我做错了什么有什么想法吗？

当 randomGame 索引等于 game0（数组中的第一个游戏）时，它应该显示视频游戏封面。因此，当单击按钮并最终到达索引 0 时，它应该显示“Helldivers 2”和游戏封面图像。

javascript css arrays display
1个回答
0
投票

对于初学者来说，您忘记调用 

cover()
函数。 但即使你这么做了，也没有任何意义。 您还需要：

  • 告诉它要显示什么封面
  • 先隐藏其他封面，然后再显示您想要的封面
  • 将显示样式设置为能够显示的内容

例如，考虑这个函数：

function cover(randomGame) {
  document.querySelectorAll('img').forEach(i => i.style.display = '');
  document.getElementById('game' + randomGame).style.display = 'block';
}

这将首先将所有 

display
元素的 
<img>
样式设置为空字符串，因此它们从 CSS 规则继承 
display
样式。 当前设置为 
none
。

然后它会通过其 

<img>
找到您要查找的特定 
id
并将 its 显示样式设置为 
block
这样就会显示出来。

然后只需从

generateGames()
调用该函数即可：

const game = games[randomGame];
gameElement.innerHTML = game;
usedGames.add(randomGame);
cover(randomGame); // <--- here
break;
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.