Я пытаюсь создать приложение, в котором оно будет генерировать случайную видеоигру и показывать обложку игры при ее созд ⇐ CSS

[Anonymous]

Я не могу получить изображение обложки видеоигры из моего html-документа, которое будет отображаться при отображении названия игры с помощью моей функции javascript. Я не уверен, что делать, и не смог найти ничего похожего на мою проблему при поиске помощи в Google.
вот мой HTML-код:

Код: Выделить всё

    





Game Generator



Video Game Generator



[img]images/helldivers2-cover.avif[/img]
[img]images/skyrim-cover.jpg[/img]
[img]images/cyberpunk2077-cover.png[/img]
[img]images/witcher3-cover.jpg[/img]
[img]images/gtav-cover.png[/img]
[img]images/starfield-cover.webp[/img]
[img]images/dbd-cover.avif[/img]
[img]images/arkse-cover.jpg[/img]
[img]images/acv-cover.jpg[/img]
[img]images/rdr2-cover.jpg[/img]
[list][/list]

Generate

вот мой 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 = '';
}
}

на данный момент у меня настроена для отображения только первая игра в массиве, но она не отображает обложку при создании заголовка. есть идеи, что я делаю не так?
предполагается, что обложка видеоигры будет отображаться, когда индекс случайной игры равен game0, которая является первой игрой в массиве. поэтому, когда кнопка нажата и она наконец достигает индекса 0, на ней должно отображаться «Helldivers 2» и изображение обложки игры.

Подробнее здесь: https://stackoverflow.com/questions/792 ... d-show-the