Hi I’m making a website project called whatsworthmore and I can’t seem to get it to work the javascript I typed seems fine but when i select a category nothing happens and I know it’s javascript but I cant figure out why nothing happens, what should happen: 2 images pop up and under the image the “value” an on the image the “name” but nothing happens.
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");
const main = document.querySelector("main");
const body = document.querySelector(".body");
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";
main.style.display = "none";
gameStarted.classList.add('active');
body.classList.add('active');
});
});
});
// Sample game data
const gameData = [
{
name: "Diamond Ring",
value: 5000,
image: "https://lh3.googleusercontent.com/pw/ADCreHed0BLjkGmOcMGIydZ0T6zP4wG-jsd7wz_sPMrFCWJD_ryci7MYKxXaCpg3upBGxwcKOpqv5k-4x1hyR7tEE1At8ppJgBY7sxgGF9LlnIUOfqXyDiLmAfgIdBVILIm5BvyPuewFNM4keNBnzQ1dv6uzCVglDanjP2Ht3mJHIigqIbJtX-dJ1Zy9E9tHBHI71_ua8yrjGT4Kh2pSKT--SBPIN5TY9qnyZi2Ka40mhL7T5A-h1BghJ7i4KEvHvLHd9cNl5NnwGbGFfv_AZs7yXNtQ_qlgus6oRX-i4aG96x3bbsGUzjwF2L-zC1L9iofmuRLx5h9uQ3PyVN7sUbclZ7LY1pjV4zvOqWRkU6RiBKkV8DlkHAsC4USs2f4Ziudtr5As7ju0mRMCDUA6sHAr14Un2mjNEABzk_2LvjNqrx_lgea_OQm9hqMtPt5jZ0DeGhVPxANxzZYZUUqSUyyD0vDRer6Jf4mkEYIay9fYWkDl1Nt-SgnB5Va70iPZsSeWe-Zco2HAJ6aeErRUcFGY19r8XY2aiLozdoxPbIIkgn85DgA_NFKguUky4VyILccilG-_cYLiqRNxA8Wns9yp2F45VYfl6QjwBDeA-MKt3wfGihQYACTMWwz60_CIzipJgg2v1utVt97KL7YAS3Y4KVc8Qn-GoKnCCkHprKrofD1fVF1Yv-7eWX87z0bzWKLQ_TM4Wfu2in5QzrFZwFuVQvJjAGrNxKnNtQRtGVXCENM1ahM0BTeao_AvLAeDj5Nhb4JArld8qb_exzRGHdOsuQWgkdcHAq-Nz0wKhtLEO8qvQHOv2ORyg1cDCS15rLSOuthkyet2oIJjzuY3hjlq8nzjTC7D-bIhYeh_eIwQjCOQXiu5RXrGzVMUX218D-bhYJ2hIQ9sFKTIXMB7T0vg6ET7lR9kOmvWQjq0Fl9Kbdg02MhNlgGFrumAzw=w693-h360-s-no?authuser=0",
},
{
name: "Smartphone",
value: 800,
image: "https://lh3.googleusercontent.com/pw/ADCreHed0BLjkGmOcMGIydZ0T6zP4wG-jsd7wz_sPMrFCWJD_ryci7MYKxXaCpg3upBGxwcKOpqv5k-4x1hyR7tEE1At8ppJgBY7sxgGF9LlnIUOfqXyDiLmAfgIdBVILIm5BvyPuewFNM4keNBnzQ1dv6uzCVglDanjP2Ht3mJHIigqIbJtX-dJ1Zy9E9tHBHI71_ua8yrjGT4Kh2pSKT--SBPIN5TY9qnyZi2Ka40mhL7T5A-h1BghJ7i4KEvHvLHd9cNl5NnwGbGFfv_AZs7yXNtQ_qlgus6oRX-i4aG96x3bbsGUzjwF2L-zC1L9iofmuRLx5h9uQ3PyVN7sUbclZ7LY1pjV4zvOqWRkU6RiBKkV8DlkHAsC4USs2f4Ziudtr5As7ju0mRMCDUA6sHAr14Un2mjNEABzk_2LvjNqrx_lgea_OQm9hqMtPt5jZ0DeGhVPxANxzZYZUUqSUyyD0vDRer6Jf4mkEYIay9fYWkDl1Nt-SgnB5Va70iPZsSeWe-Zco2HAJ6aeErRUcFGY19r8XY2aiLozdoxPbIIkgn85DgA_NFKguUky4VyILccilG-_cYLiqRNxA8Wns9yp2F45VYfl6QjwBDeA-MKt3wfGihQYACTMWwz60_CIzipJgg2v1utVt97KL7YAS3Y4KVc8Qn-GoKnCCkHprKrofD1fVF1Yv-7eWX87z0bzWKLQ_TM4Wfu2in5QzrFZwFuVQvJjAGrNxKnNtQRtGVXCENM1ahM0BTeao_AvLAeDj5Nhb4JArld8qb_exzRGHdOsuQWgkdcHAq-Nz0wKhtLEO8qvQHOv2ORyg1cDCS15rLSOuthkyet2oIJjzuY3hjlq8nzjTC7D-bIhYeh_eIwQjCOQXiu5RXrGzVMUX218D-bhYJ2hIQ9sFKTIXMB7T0vg6ET7lR9kOmvWQjq0Fl9Kbdg02MhNlgGFrumAzw=w693-h360-s-no?authuser=0",
},
{
name: "Designer Watch",
value: 3500,
image: "https://lh3.googleusercontent.com/pw/ADCreHed0BLjkGmOcMGIydZ0T6zP4wG-jsd7wz_sPMrFCWJD_ryci7MYKxXaCpg3upBGxwcKOpqv5k-4x1hyR7tEE1At8ppJgBY7sxgGF9LlnIUOfqXyDiLmAfgIdBVILIm5BvyPuewFNM4keNBnzQ1dv6uzCVglDanjP2Ht3mJHIigqIbJtX-dJ1Zy9E9tHBHI71_ua8yrjGT4Kh2pSKT--SBPIN5TY9qnyZi2Ka40mhL7T5A-h1BghJ7i4KEvHvLHd9cNl5NnwGbGFfv_AZs7yXNtQ_qlgus6oRX-i4aG96x3bbsGUzjwF2L-zC1L9iofmuRLx5h9uQ3PyVN7sUbclZ7LY1pjV4zvOqWRkU6RiBKkV8DlkHAsC4USs2f4Ziudtr5As7ju0mRMCDUA6sHAr14Un2mjNEABzk_2LvjNqrx_lgea_OQm9hqMtPt5jZ0DeGhVPxANxzZYZUUqSUyyD0vDRer6Jf4mkEYIay9fYWkDl1Nt-SgnB5Va70iPZsSeWe-Zco2HAJ6aeErRUcFGY19r8XY2aiLozdoxPbIIkgn85DgA_NFKguUky4VyILccilG-_cYLiqRNxA8Wns9yp2F45VYfl6QjwBDeA-MKt3wfGihQYACTMWwz60_CIzipJgg2v1utVt97KL7YAS3Y4KVc8Qn-GoKnCCkHprKrofD1fVF1Yv-7eWX87z0bzWKLQ_TM4Wfu2in5QzrFZwFuVQvJjAGrNxKnNtQRtGVXCENM1ahM0BTeao_AvLAeDj5Nhb4JArld8qb_exzRGHdOsuQWgkdcHAq-Nz0wKhtLEO8qvQHOv2ORyg1cDCS15rLSOuthkyet2oIJjzuY3hjlq8nzjTC7D-bIhYeh_eIwQjCOQXiu5RXrGzVMUX218D-bhYJ2hIQ9sFKTIXMB7T0vg6ET7lR9kOmvWQjq0Fl9Kbdg02MhNlgGFrumAzw=w693-h360-s-no?authuser=0",
},
{
name: "Laptop",
value: 1200,
image: "https://lh3.googleusercontent.com/pw/ADCreHed0BLjkGmOcMGIydZ0T6zP4wG-jsd7wz_sPMrFCWJD_ryci7MYKxXaCpg3upBGxwcKOpqv5k-4x1hyR7tEE1At8ppJgBY7sxgGF9LlnIUOfqXyDiLmAfgIdBVILIm5BvyPuewFNM4keNBnzQ1dv6uzCVglDanjP2Ht3mJHIigqIbJtX-dJ1Zy9E9tHBHI71_ua8yrjGT4Kh2pSKT--SBPIN5TY9qnyZi2Ka40mhL7T5A-h1BghJ7i4KEvHvLHd9cNl5NnwGbGFfv_AZs7yXNtQ_qlgus6oRX-i4aG96x3bbsGUzjwF2L-zC1L9iofmuRLx5h9uQ3PyVN7sUbclZ7LY1pjV4zvOqWRkU6RiBKkV8DlkHAsC4USs2f4Ziudtr5As7ju0mRMCDUA6sHAr14Un2mjNEABzk_2LvjNqrx_lgea_OQm9hqMtPt5jZ0DeGhVPxANxzZYZUUqSUyyD0vDRer6Jf4mkEYIay9fYWkDl1Nt-SgnB5Va70iPZsSeWe-Zco2HAJ6aeErRUcFGY19r8XY2aiLozdoxPbIIkgn85DgA_NFKguUky4VyILccilG-_cYLiqRNxA8Wns9yp2F45VYfl6QjwBDeA-MKt3wfGihQYACTMWwz60_CIzipJgg2v1utVt97KL7YAS3Y4KVc8Qn-GoKnCCkHprKrofD1fVF1Yv-7eWX87z0bzWKLQ_TM4Wfu2in5QzrFZwFuVQvJjAGrNxKnNtQRtGVXCENM1ahM0BTeao_AvLAeDj5Nhb4JArld8qb_exzRGHdOsuQWgkdcHAq-Nz0wKhtLEO8qvQHOv2ORyg1cDCS15rLSOuthkyet2oIJjzuY3hjlq8nzjTC7D-bIhYeh_eIwQjCOQXiu5RXrGzVMUX218D-bhYJ2hIQ9sFKTIXMB7T0vg6ET7lR9kOmvWQjq0Fl9Kbdg02MhNlgGFrumAzw=w693-h360-s-no?authuser=0",
},
];
let score = 0; // Initialize a score variable
// Add click event listeners to all category buttons
categoryButtons.forEach(function(button) {
button.addEventListener("click", function() {
console.log("Category button clicked.");
// Rest of your code
function startGame() {
console.log("Starting the game...");
// Randomly select two items
const item1 = getRandomItem();
const item2 = getRandomItem();
// Display the items and allow the user to choose
displayItems(item1, item2);
}
function getRandomItem() {
// Generate a random index
const randomIndex = Math.floor(Math.random() * gameData.length);
return gameData[randomIndex];
}
function displayItems(item1, item2) {
const image1 = document.querySelector(".the-images:first-child");
const image2 = document.querySelector(".the-images:last-child");
// Set the src attribute of the image elements to the item images
image1.src = "https://lh3.googleusercontent.com/pw/ADCreHed0BLjkGmOcMGIydZ0T6zP4wG-jsd7wz_sPMrFCWJD_ryci7MYKxXaCpg3upBGxwcKOpqv5k-4x1hyR7tEE1At8ppJgBY7sxgGF9LlnIUOfqXyDiLmAfgIdBVILIm5BvyPuewFNM4keNBnzQ1dv6uzCVglDanjP2Ht3mJHIigqIbJtX-dJ1Zy9E9tHBHI71_ua8yrjGT4Kh2pSKT--SBPIN5TY9qnyZi2Ka40mhL7T5A-h1BghJ7i4KEvHvLHd9cNl5NnwGbGFfv_AZs7yXNtQ_qlgus6oRX-i4aG96x3bbsGUzjwF2L-zC1L9iofmuRLx5h9uQ3PyVN7sUbclZ7LY1pjV4zvOqWRkU6RiBKkV8DlkHAsC4USs2f4Ziudtr5As7ju0mRMCDUA6sHAr14Un2mjNEABzk_2LvjNqrx_lgea_OQm9hqMtPt5jZ0DeGhVPxANxzZYZUUqSUyyD0vDRer6Jf4mkEYIay9fYWkDl1Nt-SgnB5Va70iPZsSeWe-Zco2HAJ6aeErRUcFGY19r8XY2aiLozdoxPbIIkgn85DgA_NFKguUky4VyILccilG-_cYLiqRNxA8Wns9yp2F45VYfl6QjwBDeA-MKt3wfGihQYACTMWwz60_CIzipJgg2v1utVt97KL7YAS3Y4KVc8Qn-GoKnCCkHprKrofD1fVF1Yv-7eWX87z0bzWKLQ_TM4Wfu2in5QzrFZwFuVQvJjAGrNxKnNtQRtGVXCENM1ahM0BTeao_AvLAeDj5Nhb4JArld8qb_exzRGHdOsuQWgkdcHAq-Nz0wKhtLEO8qvQHOv2ORyg1cDCS15rLSOuthkyet2oIJjzuY3hjlq8nzjTC7D-bIhYeh_eIwQjCOQXiu5RXrGzVMUX218D-bhYJ2hIQ9sFKTIXMB7T0vg6ET7lR9kOmvWQjq0Fl9Kbdg02MhNlgGFrumAzw=w693-h360-s-no?authuser=0";
image2.src = "https://lh3.googleusercontent.com/pw/ADCreHeQcIFyZ4zdIPT5TWdBNc-VaPVxue2FZipOANSp2RIhtSlJIbcCX6PKATvn2uOoei0-6TnwgXkTG4PCNs6MKVG81WYIPWd0XBaBGsumd3KK9uMEucXZ0iRRAejixjQqTzfFMGHO5JKjRzJze0cGpnSrfq3rrQ6whawkp5Pe8EJ-9KOL_bXuPT0zWtryp1BTVcXFZUNQqWUrBY_G0dwsSa97Lk2NipzXFEBhyKngaI3H6tXprq4Jr1ddas29SVbeKIVHAGsyBm_piZ4OScdFVKU92a3tG-eh-IN6Go3ZlBduAkh1H0zKW3pVAk6kRCZoKO3YR_AiO_D4lh0qxa7HMNxirfKnnQVKr8Z4j1vBMkguTh7RP-7VSYb58CV7tRonyXtveg1tjgITSILO4SBMrbLIcXuzeZrwW6NtC-OEtd8H7dp0VRAubjwM8l6xr6YsdybC8zsBY_l0KUptxvI1gqOqwA0s2nHbtQ65Ntlx1-AUvU1eiFGZHtYzZIj3ofFCJnBzdPRZYl0xYeMAoMD91o8MvfUHhAqwyYSSbGlNmPvPpvzxUmjfwCb4kVJV1VutvCU0NO6MKi1uNZ4eOXu3A7yCtDGNn1i4PVeFZS2YiX4JbQ4d77kg8jAQ08DTwVxdcvfK1vo97vVaJQsxspHdAxH3pmozRe5DNJSzLjpsVZsWoCOTN7z7uHDv0X9ybNg-8qcRkp80itfAN0kJWTOh1uRJWHW9EgMtVHPxYfLH9fgamn7wSFXN5L5TSVszofdw-mZRYRiZ8449U85cfaOY5CQhhpoe_OqqC81ox6iw6rxQHCYCBa6c9mfPcePUo9cKw_4ZbaFUW5DQINdnt3cDBfBmU13sCqug9XFhmpmFm9Bil7weBgMcLcfnG7xaCwJroJrK5vdqKx1QGXkfhbGuANdHYUGg-aDybyVnU4ZUfH5ILjLmwcCAgflr0g=w719-h347-s-no?authuser=0";
// Add click event listeners to the images for user selection
image1.addEventListener("click", () => compareItems("Diamond Ring", "Smartphone"));
image2.addEventListener("click", () => compareItems("Smartphone", "Diamond Ring"));
}
function compareItems(selectedItem, otherItem) {
if (selectedItem.value > otherItem.value) {
// User's choice was correct
score++; // Increment the score
alert("Correct! You guessed right.");
} else if (selectedItem.value < otherItem.value) {
// User's choice was incorrect
score--; // Decrement the score
alert("Oops! Your guess was incorrect.");
} else {
// It's a tie, handle as desired
alert("It's a tie!");
}
// Display the current score (you can update your UI)
console.log("Current Score: " + score);
// Start the next round of the game
startGame();
}
// Call startGame() when the page loads or when the "Play" button is clicked
// Example:
// startGame();
});
});
*{
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;
}
.gameStarted.acive{
display: flex;
padding: 30rem;
}
.divv{
flex-direction: row;
border: 2px solid red;
}
.the-images {
display: flex;
}
.body.active{
background-image: url('https://images.hdqwalls.com/download/black-gradient-b9-1920x1080.jpg');
transition: 1s ease;
}*{
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;
}
.gameStarted.acive{
display: flex;
padding: 30rem;
}
.divv{
flex-direction: row;
border: 2px solid red;
}
.the-images {
display: flex;
}
.body.active{
background-image: url('https://images.hdqwalls.com/download/black-gradient-b9-1920x1080.jpg');
transition: 1s ease;
}<!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 class="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>
</main>
<div class="gameStarted">
<h2 class="vs">VS</h2>
<h3 class="more">More</h3>
<h3 class="less">Less</h3>
<div class="divv">
</div>
</div>
<script src="questions.js"></script>
</body>
</html>