My goal is to add one class and remove another class when the start quiz button is clicked. While the 'info_box' class is successfully added, the 'start_btn' class does not get removed; it just changes position (from flex to no flex). This is the Html
<body>
<div class="container">
<div class="start_btn" >
<button type="button" class="startBtn">Start Quiz</button>
</div>
<div class="row info_box">
<div class="col-md-6">
<!-- Rest of the code -->
This is the CSS
/* START BUTTON BOX */
.start_btn {
height:80vh;
display: flex;
justify-content:center;
align-items:center;
}
.startBtn {
font-size: 25px;
font-weight: 500;
color: var(--clr-steelBlue);
padding: 15px 30px;
outline: none;
border: none;
border-radius: 5px;
background: var(--clr-white);
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
pointer-events: auto;
}
.startBtn:focus {
background-color: var(--clr-steelBlue);
color:var(--clr-white);
outline: var(--clr-steelBlue);
}
.showInfoBox.info_box {
display: flex;
}
/* INFO BOX */
.info_box {
height:100vh;
display: flex;
justify-content:center;
align-items:center;
display:none;
}
This is the javascript
const startbtn = document.querySelector(".start_btn");
const infoBox = document.querySelector(".info_box");
startbtn.addEventListener('click', function(){
startbtn.classList.remove("start_btn");
infoBox.classList.add("showInfoBox");
})
I checked the developer's tool and noticed that the class start_btn is not there, but the button inside the start_btn div is still present https://i.sstatic.net/0rvd7.png
I tried removing the button separately before removing the start_btn box, but it did not work. I also attempted making a separate class to remove the start_btn like this, but it did not work
.hide.start_btn {
z-index:-1;
pointer-events: none;
}
How can I successfully remove the start_btn class? Thank You!!