I'm facing an issue with displaying the video game cover image from my HTML document when the game title is generated using a JavaScript function. I have searched online for solutions, but couldn't find anything similar to my problem.
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...
Here is my JavaScript:
// Functionality and code are described here...The challenge lies in getting the game cover to display along with the respective game title. If you have any suggestions or insights on how to resolve this issue, please let me know!