javascriptcssarraysdisplay

im trying to make an app where it will generate a random video game and show the games cover when its generated

i cant get the video game cover image from my html document to be displayed when the game title is displayed using my javascript function. im not sure what to do and couldnt find anything similar enough to my problem when googling for help.

here is my 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>

here is my 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;
}

here is my 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 = '';
  }
}

at the moment i only have the first game in the array set up to be displayed but it wont show the cover when the title is generated. any ideas as to what im doing wrong?

its supposed to display the video game cover when the randomGame index is equal to game0 which is the first game in the array. so when the button is clicked and it finally gets to index 0, it should display 'Helldivers 2' and the games cover image.

Solution

  • For starters, you forgot to ever call your cover() function. But even if you do, it won't do anything meaningful. You also need to:

    For example, consider this function:

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

    What this will do is first set the display style of all of the <img> elements to an empty string, so they inherit the display style from their CSS rules. Which is currently set to none.

    Then it will find the specific <img> you're looking for by its id and set its display style to block so it will be displayed.

    Then just call the function from generateGames():

    const game = games[randomGame];
gameElement.innerHTML = game;
usedGames.add(randomGame);
cover(randomGame); // <--- here
break;