h2,h3 elements not showing on the page and image issues

September 27, 2023

I’m working on a project and i cant seem to make my .gameStarted show on the screen after clicking the .category , i also have no idea how to make 2 img‘s half width to fit on screen i need help here is code

document.addEventListener("DOMContentLoaded", function () {
    const playButton = document.querySelector(".play");
    const popup = document.getElementById("popup");
    const closePopupButton = document.getElementById("close-popup");
    const categoryButtons = document.querySelectorAll(".category");
    const gameStarted = document.querySelector(".gameStarted"); 
    const mainPage = document.getElementById(".main-page");

    playButton.addEventListener("click", function () {
        popup.style.display = "block";
    });

    closePopupButton.addEventListener("click", function () {
        popup.style.display = "none";
    });

    // Add click event listeners to all category buttons
    categoryButtons.forEach(function (button) {
        button.addEventListener("click", function () {
            // Close the popup
            popup.style.display = "none";

            // Hide the entire page
              document.body.style.display = "none";

            // Start the game
            gameStarted.style.display = "block";
        });
    });
});

*{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
    font-family: Ink Free;
}
/*SET THE NAVIGATION BAR AT THE TOP OF THE SCREEN, REMOVE BACKGROUND COLOR AND BOX SHADOW LATER ON*/
.navbar{
    
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  align-items: center;
 

  
}
/*SETTING THE LOGO COLOR AND ANIMATION*/
h1{
    color: white;
    font-size: 2rem;
    margin-left: 2rem;
   
}
h1>a:hover{
    margin-left: 2rem;
    transition: 0.5s ease-out;
  
}
/*SETTING THE NAVBAR*/
li>a{
    text-decoration: none;
    color: white;
    font-size: 1.4rem;
    margin-left: 0.6rem;
    margin-right: 3rem;
}
li>a:hover{
    color:bisque;
    opacity: 0.8;
    transition: 0.25s ease-out;
}
h1>a{
    text-decoration: none;
    color: white;
}
ul{
    list-style-type: none;
}

/*BACKGROUND IMAGE SET TO FIT, CHANGE THE WIDTH AND HEIGHT VH IF NEEDED, OPACITY TO 1 OR REMOVE*/
body{
    background-image: url('https://wallpapercave.com/wp/BW3DgZD.jpg');
  background-size: cover; 
    width: 100vh;
    height: 100vh;
    opacity: 0.96;
}
/*THE MAIN TEXT AT THE MIDDLE OF THE SCREEN*/
.wwm{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.title{
    font-size: 5rem;
}
/*PLAY BUTTON NEEDS JAVASCRIPT*/
.play{
    margin-top: 1rem;
font-size: 3rem;
padding: 0rem 3rem;
background-color: rgb(122, 64, 72);
color: white;
}
.play:hover{
    opacity: 0.8;
    transition: .20s ease-in-out;
}


/*chatgpt*/
.popup {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

.popup-content {
    background: white;
    width: 60%;
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

.category {
    margin: 5px;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.5rem
}

.close-popup {
    margin-top: 20px;
    background-color: #DC3545;
    font-size: 1.5rem;
}



.gameStarted {
    display: none;
}

.vs,.more,.less{
    color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>Whats Worth More</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <main>
        <div id="main-page">
            <header class="navbar">
                <h1><a href="#">WWM</a></h1>
                <nav class="nav">
                    <ul>
                        <li>
                            <a href="#">Play</a>
                            <a href="#">Categories</a>
                        </li>
                    </ul>
                </nav>
            </header>
        </div>
        <section class="main">
            <div class="wwm">
                <h2 class="title">Whats Worth More</h2>
                <button class="play">Play</button>
            </div>
        </section>
        <div class="popup" id="popup">
            <div class="popup-content">
                <h2>Select a Category</h2>
                <div class="categories">
                    <button class="category">Random</button>
                    <button class="category">Boats & Planes</button>
                    <button class="category">Watches</button>
                    <button class="category">Houses</button>
                    <button class="category">Cars</button>
                    <button class="category">Drinks</button>
                    <button class="category">Food</button>
                    <button class="category">Companies</button>
                    <button class="category">Art</button>
                    <button class="category">Clothing</button>
                    <button class="category">Technology</button>
                    <button class="category">Electronics</button>
                    <button class="category">Jewelry</button>
                    <button class="category">Collectibles</button>
                </div>
                <button class="close-popup" id="close-popup">Close</button>
            </div>
        </div>
        <div class="gameStarted">
            <h2 class="vs">VS</h2>
            <h3 class="more">More</h3>
            <h3 class="less">Less</h3>
        </div>
    </main>

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

>Solution :

first, there is a little error in your code that make the code not working:
line 7: const mainPage = document.getElementById(".main-page");
You have add a "." before "main-page".

Next, to display 2 images on the screen, just set a class for the images and set the size of 50% (width: 50%)

HTML:

<div class="class-of-images">
    <img class="the-images" src="./LINK.PNG">
    <img class="the-images" src="./LINK.PNG">
</div>

CSS:

.class-of-images{
    display: flex;
}

.the-images{
    width: 50%;
}

Your JS code:

document.addEventListener("DOMContentLoaded", function() {
    const playButton = document.querySelector(".play");
    const popup = document.getElementById("popup");
    const closePopupButton = document.getElementById("close-popup");
    const categoryButtons = document.querySelectorAll(".category");
    const gameStarted = document.querySelector(".gameStarted");
    const mainPage = document.getElementById("main-page");

    playButton.addEventListener("click", function() {
        popup.style.display = "block";
    });

    closePopupButton.addEventListener("click", function() {
        popup.style.display = "none";
    });

    // Add click event listeners to all category buttons
    categoryButtons.forEach(function(button) {
        button.addEventListener("click", function() {
            // Close the popup
            popup.style.display = "none";

            // Hide the entire page
            mainPage.style.display = "none";

            // Start the game
            gameStarted.style.display = "block";
        });
    });
});