Trying to create a Quiz web application, I want the quiz container to be hidden with the CSS property display: none; until I click "start game." Once the game starts, the container should change to display: grid;. However, when I try to reveal the div, it doesn't appear. Any ideas?
const buttonGrid = document.querySelector('.grid');
function startGame() {
buttonGrid.remove(); // Remove entire grid container
logo.forEach(logoElement => logoElement.remove()); // Remove each logo element
const selectedFile = fileInput.files[0];
if (selectedFile) {
const reader = new FileReader();
reader.onload = function (e) {
const fileContent = e.target.result;
try {
const quizData = JSON.parse(fileContent);
displayQuiz(quizData);
} catch (error) {
console.error("Error parsing JSON file:", error);
}
};
reader.readAsText(selectedFile);
} else {
console.error("No file selected.");
}
const quizField = document.getElementById('quiz-container');
quizField.classList.add('show-container');
}.container{
background: white;
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center; /* Center vertically */
align-items: center; /* Center horizontally */
#question{
font-size: 25px;
margin-bottom: 150px;
}
.quizField{
display: none;
text-align: center;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
#submit-btn{
margin-top: 50px;
display: inline-block;
margin: 0 auto;
}
#result {
margin-top: 20px;
}
#total-score{
font-size: 18px;
margin-top: 20px;
font-weight: bold;
}
show-container{
display: grid;
}
.button-56{
align-items: center;
background-color: rgb(74, 227, 36);
border: 2px solid #111;
border-radius: 8px;
box-sizing: border-box;
color: #111;
cursor: pointer;
display: flex;
font-size: 16px;
height: 48px;
justify-content: center;
line-height: 24px;
max-width: 100%;
padding: 0 25px;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.button-56:after{
background-color: lightgrey;
border-radius: 8px;
content: "";
display: block;
height: 48px;
left: 0;
width: 100%;
position: absolute;
top: -2px;
transform: translate(8px, 8px);
transition: transform .2s ease-out;
z-index: -1;
}
.button-56:hover:after{
transform: translate(0, 0);
}
.button-56:active{
background-color: #ffdeda;
outline: 0;
}
.button-56:hover{
outline: 0;
}<body>
<!-- Main container for the page -->
<div class="container">
<!-- Question and Answer Fields-->
<div id='quiz-container' class="quizField">
<div id="question"></div>
<input type="text" id="answer-input" placeholder="Your Answer">
<button class='button-56' id="submit-btn" onclick="submitAnswer()">Submit</button>
<div id="result"></div>
<div id="total-score"></div>
</div>
<div class="grid">
<button id="start" class="button-56" role="button">Start</button>
<label for='fileInput' id='list' class="button-56">Open JSON File </label>
<input type="file" id="fileInput" class="file" accept=".json" /></button>
<button id='contact' class="button-56" role="button">Contact</button>
</div>